Angular Material Theming Workshop (Advanced)

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!

Purchase Free Preview

Watch Intro Video

🎄🎁 🎅 Christmas Sale is Here 🎅 🎁🎄

The course is available with a 20%-off discount!
Apply the coupon 🚀

00 Days
00 Hours
00 Minutes
00 Seconds

This Is What You Get

Always Actual Info

The information in the course is being constantly updated, so new Angular Material features will be always covered
In-Depth Knowledge

From this course, you will know how theming works under the hood, explore its source code and structure
Access to Source Code

You will get exclusive access to the private repository which contains source code from this Course

Topics Which Are Covered

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 )
How to override default values of Angular Material Theme without introducing additional classes and selectors

Students About the Workshop

🌟🌟🌟🌟🌟

It was amazing!

Radek Pikhart

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...

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 you very much!

Read Less

Dmytro is a very talented tutor

shah zaman

Dmytro is a very talented tutor! He explained each topic very thoroughly. I would defiantly recommend this course. Really Thanks, Dmytro!

Read Less

This was really Advanced course

Giga Sagrishvili

Thanks for nice explanation, I recommend everyone to watch this course.

Read Less

Excellent Course

Marco Rinaldi

This course is a "godsend" for everyone that wanna know how Angular Material work and deepen further the knowledge of Sass.

Read Less

Great work as always

George Zouros - Elenidis

I 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 ...

I 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 Less

Recommended for all Angular developers

Giorgi Merabishvili

Absolutely brilliant workshop. Gives you a solid understanding of SCSS and helps you to understand how Angular material theming works under the hood to exten...

Absolutely 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 Less

Amazing!

Alexander Panchuk

The 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...

The 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 Less

Great workshop!

Sam Velych

Thank 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...

Thank 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 Less

All Lessons From the Course

1

App creation & basic layouting
2

SASS language essentials
- Intro to SASS/SCSS language
  FREE PREVIEW
- Variables in SASS/SCSS
  FREE PREVIEW
- How to work with Hash Maps, Lists & @each loop
  FREE PREVIEW
- Functions in SASS/SCSS
- Re-use Styles with SASS Mixins
- More maintainable code with Modules
- Nesting in SASS/SCSS
3

Theming App with Angular Material
- Migration from CSS to SCSS
- Migration from LESS to SCSS
- About Style Encapsulation in Angular
  FREE PREVIEW
- Let's initialise a custom Theme
  FREE PREVIEW
- About 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 work with Elevations (Shadows)
- How to override default properties in Angular Material
- 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
- Migration to Angular 12 Material Theme API
- Improving UX by implementing Strong Focus Indicator
- Switching Graphic Elements (aka images, logos) between Themes
- UPD 1: How to override Background/Foreground colors
- Migration To Angular Material 13
- Migration To Angular Material 14
- Migration of the project to Angular 15

Available Pricing Options

Pick what you actually need

$59.99

Only Access to Video Lectures & GitHub Repo

Start learning
$119.00

+ 1h Personal Training

Start learning
$659.00

+ 5h of Training & Consulting

Start learning

Meet your Instructor

Google Developer Expert in Angular | Microsoft MVP | Author of Decoded Frontend

Dmytro Mezhenskyi

My name is Dmytro Mezhenskyi. I have been working as a Frontend Developer since 2012 and I have experience with different projects, different scales, and frameworks. In 2020 I decided to run my YouTube channel "Decoded Frontend" about Web Development where I share my knowledge. Teaching has inspired me a lot and I decided to continue with it also on other platforms in order to help hundreds of people to be better developers.

Developers About the Instructor

If you need help, this is your guy!

by Markus Hatvan (markushatvan.com)

Dmytro is a specialist when it comes to JavaScript frameworks, and I am amazed by the speed at which he can output high-quality code. I have worked with him on two projects in the past and always appreciated his constructive feedback in code reviews. Apart from coding, he can also teach advanced technical concepts, so if you need help, this is your guy!

Money Back Guarantee

If the course doesn't meet your expectation, you can request money back within 14 Days after you purchased the course

Ok, l want to try

Still not sure?

Then check out the first course sections for FREE

Try Free Version

FAQ

How I can book 1-on-1 Personal Training?
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.
How I Can Get Access to Private Github Repo
After purchase, you will get an invitation link within 48 Hours. If it didn't happen, please contact me via dmytro@decodedfrontend.io
Does This Workshop Cover Angular CDK and Material Components?
No, this workshop is focused only on Angular Material Theming capabilities.
If I am a new to Angular will this course help me?
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 :)
Is the Workshop updated to Angular 15?
At this time the course was migrated to Angular 14. This course will be re-recorded in Q1 2022 because Angular Material 15 comes with massive internal changes that impact the course content. (the old course content will NOT be removed)
Which Angular version is being used in the Workshop?
The Workshop is focused only on the latest Angular versions (11 and higher) though it might work also for Angular 9/10.
What if I Have Any Problem With Purchases?
If you experience any issues or have any questions you can always reach me via: dmytro@decodedfrontend.io
What Is Included in the Most Expensive Course Variant?
This option means that besides the course you have 6 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 dmytro@decodedfrontend.io
What if I Didn’t Like the Course?
If you for whatever reason didn't like the workshop you can refund your money within 14 days after purchase

Made with ❤️

by Google Developer Expert in Angular

🔥 Angular Developers Also Like These Courses 🔥

All Courses

Advanced Angular Forms

(19) 5.0 average rating

The latest course about Angular Forms you ever need.

108 Lessons $99.00

View more courses

Always Actual Info

In-Depth Knowledge

Access to Source Code

If you need help, this is your guy!

Advanced Angular Forms