Angular Material Theming Course (In-Depth)
Theming capabilities in the Angular Material library are way more powerful than you think. You just have to discover and unleash this power and this course will help you with it!
The course is available with a 15%-off discount!
We will start from basics and gradually dive into source code understanding how things actually work
Basic SCSS language syntax and features like: Variables, Modules, Loops, Hash-Maps, Functions etc
Understanding of a color system in Material Design and Angular Material and how to configure and extend your own color palette
Different strategies of migration to SCSS from Less or CSS3
Proper custom component theming
How to work and configure Typography in Angular Material
How to implement Dark Theme for your Application
How to lazy-load Themes and decrease bundle size for your styles
How to configure density of your Angular Material Theme
How to work with Elevations ( Shadows )
🌟🌟🌟🌟🌟
Absolutely amazing training. Now I have much better understanding how Angular Material theming works under the hood. It will help me in my projects. Thank yo...
Read MoreAbsolutely amazing training. Now I have much better understanding how Angular Material theming works under the hood. It will help me in my projects. Thank you very much!
Read LessDmytro is a very talented tutor! He explained each topic very thoroughly. I would defiantly recommend this course. Really Thanks, Dmytro!
Dmytro is a very talented tutor! He explained each topic very thoroughly. I would defiantly recommend this course. Really Thanks, Dmytro!
Read LessThanks for nice explanation, I recommend everyone to watch this course.
Thanks for nice explanation, I recommend everyone to watch this course.
Read LessThis course is a "godsend" for everyone that wanna know how Angular Material work and deepen further the knowledge of Sass.
This course is a "godsend" for everyone that wanna know how Angular Material work and deepen further the knowledge of Sass.
Read LessI liked the SCSS refresher. To be honest there isn’t any course or even tutorial for angular material theming and customisation. I’m really glad you decided ...
Read MoreI liked the SCSS refresher. To be honest there isn’t any course or even tutorial for angular material theming and customisation. I’m really glad you decided to spent the time and effort to create one. I’m also a YouTube subscriber so keep up the great work there as well. Thanks for everything.
Read LessAbsolutely brilliant workshop. Gives you a solid understanding of SCSS and helps you to understand how Angular material theming works under the hood to exten...
Read MoreAbsolutely brilliant workshop. Gives you a solid understanding of SCSS and helps you to understand how Angular material theming works under the hood to extend the functionality smoothly and to create your own custom theming in your application. Helped me a lot in my current project. Thank you very much!
Read LessThe marvelous course gives you a solid understanding of SCSS and Angular Material theming. It doesn't matter if you are new in Angular or you are experienced...
Read MoreThe marvelous course gives you a solid understanding of SCSS and Angular Material theming. It doesn't matter if you are new in Angular or you are experienced, everyone would understand and bring something new into daily coding after finishing the course! Looking forward to turning my new knowledge of Angular Material into action.
Read LessThank you for this course, Dmytro! I wish I found it earlier when my team just started the greenfield project and we could avoid many problems hacking Angula...
Read MoreThank you for this course, Dmytro! I wish I found it earlier when my team just started the greenfield project and we could avoid many problems hacking Angular Material. The workshop is relatively short but pragmatic.
Read LessCreate an Angular App for the Workshop
FREE PREVIEWAdding some Layout to the App
FREE PREVIEWMigration from CSS to SCSS
Migration from LESS to SCSS
About Style Encapsulation in Angular
FREE PREVIEWLet's initialise a custom Theme
FREE PREVIEWAbout Color System in Material Design
How to add additional colors to Angular Material (success & info color)
Theming our own component
Improve Theme for our Custom Component
Typography in Angular Material & how to configure it
Light off - Dark Theme Implementation
How to load our Themes lazily
Reduce Bundle Size for our Styles
Fix Typography Bug - changing of global Typography Selector
Density in Angular Material & How to adjust it for custom Components
How to override default properties in Angular Material
How to work with Elevations (Shadows)
Migration to Angular 12 but keeping old Theming API
Angular Material 12 and overriding of "defaults"
Overview of the new Angular 12 Material Theme API
Improving UX by implementing Strong Focus Indicator
Migration to Angular 12 Material Theme API
Switching Graphic Elements (aka images, logos) between Themes
UPD 1: How to override Background/Foreground colors
Migration To Angular Material 13
Migration of the project to Angular 15
Migration To Angular Material 14
Intro to SASS/SCSS language
FREE PREVIEWVariables in SASS/SCSS
FREE PREVIEWHow to work with Hash Maps, Lists & @each loop
FREE PREVIEWFunctions in SASS/SCSS
Re-use Styles with SASS Mixins
More maintainable code with Modules
Nesting in SASS/SCSS
Initial Project State Setup
Project Layout & Angular Material Installation
About Style Encapsulation in Angular
Custom Theme Initialization
Overview of Angular Material Theming API
Anatomy of Material Theme Config
Understanding the Theme Color System
Configuring Primary, Accent & Warn Colors
Configuration of Foreground and Background colors
Creating a Custom Color Palette
How to work with Elevations (Shadows)
How to Configure Typography for the Theme
What is Typography Hierarchy
How to configure Density in Angular Material Theme
Theming Custom Components (Colors)
Theming Custom Components (Typography)
Theming Custom Components (Density)
Theming Custom Components (Multiple Component Color Variants)
Theming Custom Components (Elevations)
Reducing the Theme bundle Size
Refactoring and Splitting Theme Structure
Implementing the Dark Theme
Splitting Themes Into Separate File Chunks
Conditionally Switching Between Dark/Light Theme Without JavaScript
Lazy-Loading the Themes
Loading Theme on Demand
How Keep Selected Theme Persistently
Removing Warning About "Missed Angular Material Core Theme" (which is not)
How To Apply Additional Colors To the Theme
Scoped Styles (Sub-Theming) in Angular Material Theme
Dmytro Mezhenskyi
If you purchased the course with an option that includes "1 Hour Personal training" you can schedule a call following the link you got in the "Welcome" email.
After purchase, you will get an invitation link within 48 Hours. If it didn't happen, please contact me via [email protected]
No, this workshop is focused only on Angular Material Theming capabilities.
This course is designed for developers who has already at least some very little experience with Angular & Angular Material. If you just started with Angular I would recommend you to get back to this workshop later :)
At this time the course was migrated to Angular 14. Currently, this course was re-recorded with Angular 15 and the new version is represented as a separate course section
The Workshop is focused only on the latest Angular versions (11 and higher) though it might work also for Angular 9/10.
If you experience any issues or have any questions you can always reach me via: [email protected]
This option means that besides the course you have 5 hours of consulting service from the instructor regarding Angular Material Theming. It can be code analysis, advice, training, mentoring, coding, etc. It works the best for small teams or startups. Before purchasing this option it is better to clarify it via [email protected]
by Google Developer Expert in Angular