Angular Material Theming
Theming capabilities in the Angular Material library are way more powerful than you might think
What you’ll learn
Angular Material Theming
-
How to implement Dark Theme for your Application
-
Proper Component Theming
-
Understanding of a color system in Material Design and Angular Material and how to configure and extend your own color palette
-
Basic SCSS language syntax and features like: Variables, Modules, Loops, Hash-Maps, Functions etc
-
How to override default values of Angular Material Theme
-
Learn how to configure density of your Angular Material Theme
-
How to work and configure Typography in Angular Material
-
How to lazy-load Themes and decrease bundle size for your styles
Requirements
-
A little experience with Angular needed
-
Needed understanding of what is Angular Material library
Description
If you are tired of the mess in your Angular Material Theme – this course is for you!
After this 4 Hours Course, you will know how to properly manage your Angular Material Theme and bring some order in your (S)CSS. We will not be hacking it but rather gracefully extend it.
How do we achieve it?
Firstly, we will start with learning the basics of the SASS(SCSS) language. Why would we need it? The thing is that the Angular Material Theme is written with SASS language and if we want to extend and reuse functionality from it.
Secondly, I will cover some fundamentals of Material Design specs like colors or typography anatomy, so eventually, for you, it will be clear why things are done this way and not the other way around.
Thirdly, we are going to expose the internals and source code of the theme. It will give you an overview of how things work under the hood, the theme’s hidden features, and limitations.
What I will be able to do after the course?
After the course, you will be able to write (refactor) your Theme in such a way that your styles will be consistent, lean, and maintainable. You will be able how to switch color palettes, extend your base color palette with extra ones like success or info color, and fetch different shades (darker, lighter). The course will give you an understanding of how to build a Dark Theme and how to load it on-demand (lazy), so you can ultimately 2x decrease your CSS bundle size. You will know how works typography and how to define different font sizes or font families for your titles, buttons, inputs, and paragraphs. You will be able to change density (sizes) for some of the Material components and your custom ones. And this is just a small part of what you will learn along the line. To see the full list please scroll a little bit down to curriculum.
IMPORTANT!!!
This course DOES NOT include Angular CDK and Angular Material Components. It is focused exclusively on Theming.
If you want to learn Angular Material or Angular CDKÂ you should not buy this course.
Who this course is for:
- Angular Developers who use Angular Material in their Projects
- Angular Developers who tired of the mess in their CSS and Angular Theme
- Last updated 9/2021
Angular & NodeJS – The MEAN Stack Guide Course
Download Now Content From: https://www.udemy.com/course/angular-material-theming/
