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!

Buy €59,99 Free Preview

Watch Intro Video

🔥 Black Friday Sale 🔥

Grab it with 25%-off discount!

00 Days
00 Hours
00 Minutes
00 Seconds

Apply Discount 🚀

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 )

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

Intro
- README! How To Follow The Course
  FREE PREVIEW
2

Legacy: Theming App with Angular Material
- Create an Angular App for the Workshop
  FREE PREVIEW
- Adding some Layout to the App
  FREE PREVIEW
- 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 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
3

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
4

Remastered: Theming with Angular Material 15
- 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

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 [email protected]
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/16?
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
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: [email protected]
What Is Included in the Most Expensive Course Variant?
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]

🔥 Get All Courses with Discounted Price 🔥

All Courses

All Angular Courses in One Mighty Bundle 💪

Level up your Angular skills as never before 🚀

5 Courses €245,00

More about the Bundle

Made with ❤️

by Google Developer Expert in Angular

Always Actual Info

In-Depth Knowledge

Access to Source Code

If you need help, this is your guy!

All Angular Courses in One Mighty Bundle 💪