Angular Material and the Material Design system are a great choice for building
complex Angular applications for mobile and desktop. But as your team moves from
hand-coded components to Angular Material components, you’ve likely found there
is extensive learning and context needed to create better-designed applications
fast. While the documentation for Angular Material is a great reference on how
to use the components, it doesn’t cover how to compose those components into an
This class will introduce the concept of design systems and Google's Material
Design, then teach how Angular Material can make constructing a polished
application easier and faster.
Our students build on their Angular skills and learn to assemble applications
with Angular Material. By building this way, using the abstractions, components,
and best practices that arrive in Angular Material and its supporting tools,
teams can produce well-designed and robust applications quickly.
The class covers:
Up-to-date Angular and Angular Material versions
Design customization / theming in Angular Material
Clear, isolated examples for precise understanding
Efficient use of Angular Material in sprawling applications with many
Screens with numerous interoperating business rules
Complex, realistic examples
Who Should Attend?
Developers and teams who are building Angular applications and are considering
or using Angular Material as their design system and component library.
Prerequisites / requirements
Several months of experience with Angular
Ability to read and write moderately complex CSS
A computer---this is a hands-on workshop
Ability to install software, including Node, NPM, and packages
We have trained thousands of developers at hundreds of companies,
including numerous global leaders.
Angular Material's place in the world
What is UI/UX?
Design Systems--a common answer for many UI/UX questions
Material Design, Google’s design system
Material is the metaphor
Bold, graphic, intentional
Motion provides meaning
Material case studies
Angular Material, an implementation of Material Design
First class support by the Angular team
The people creating the design system are UI/UX experts
What kinds of things can you make with Angular Material
Angular Material’s dependencies
Angular Material alternatives
Other implementations of Material Design
Your first Angular Material app
Create a new CLI app
Add Angular Material
See changes made by the schematic
Make sure Angular Material was added
Add a Material component
Angular Material schematics
Production Angular Material applications
Create a new CLI application
Add Angular Material
Create a custom theme
Use an NgModule to import Angular Material modules in one place
Use components and directives throughout your application
The most common Material components
Buttons and Indicators
Other builtins to be discussed later
Material Page Layout
Angular Material navigation layout
Layout systems to use with Angular Material
Floats / old Bootstrap style
CSS Flexible Box Layout
angular/flex-layout - first class sister library for handling layout/responsive design
Creating a common layout for similar screens
Laying out a feature versus a screen
Global vs. local CSS classes
The mechanics of Angular Material themes
What's in a color palette - the three color system
Tips for generating your own palettes
Applying themes to custom components
Quick guide to Sass
Customizing the builtin components
Load from a CDN vs locally?
Removing dependencies on CDNs
All the other components
CDK, the layer under Angular Material
What is CDK
Drag and drop
Oasis Digital instructors have extensive experience with both
Angular and numerous surrounding technologies; here are some
of them. The specific instructor(s) assigned to your class will
depend on which class or class topics (we customize!) are
put together, availability, additional consulting needs, etc.
Q: Is this taught "in person"?
A: We offer training both in-person and online via remote conferencing.
Q: How does the remote option work?
A: Much like an in-person class, it is conducted by our expert trainers, in real time.
The trainers can answer questions, assist with trouble students are having, etc.
We strive to offer as much of the in-person experience as possible, online.
Q: Are there open enrollment public classes?
A: We currently only offer an open-enrollment "public" class for our flagship
Angular Boot Camp.
Q: How does the recorded class work?
A: In a recorded class, the biggest obstacle is the lack of live question-and-answer
To deliver a great result, we practice teaching with live groups before
creating the recorded class. In this way, we aim to answer as many of the common
(and less common) questions as possible. We also do as much "live coding" as makes
sense for the topic, in a recorded class.
Q: Can we schedule a private class any time?
A: Our classes are taught by developers who use the subject technologies in their daily work,
so we don't assign "any" available developer/trainer to any particular class,
but only to classes with a strong experience and knowledge match.
Please contact us to arrange a date.
Training for your team, available now
For corporate groups and other organizations, we offer live, in-person instruction.
These teams typically have advanced needs and are looking for hands-on assistance,
so for larger groups we send two expert instructors. Each private class is preceded
by a technical discussion so that we can understand your needs and customize the
content to deliver maximum value.
Classes can be customized, combined, and augmented with consulting to assist
your team in implementing the ideas in your environment.