Angular Material Colors: mdColors directive is used to apply the theme-based color expression as RGBA CSS style values. Here in this tutorial we are going to explain how you can apply colors using mdColors directive. You can also use our online demo edit and run the code online.
Angular Material Colors Example
Syntax
The syntax for adding color is similar as color defining in the scss.
Angular Material Colors | Syntax:
[?theme]-[palette]-[?hue]-[?opacity] |
- [theme] – The default value is the default theme.
- [palette] – Can be either palette name or it can be primary/accent/warn/background.
- [hue] – The default is 500 (hue-x can be used with primary/accent/warn/background).
- [opacity] – default is 1.
? it indicates the optional parameter.
Example
Now Let us create first example –
Add Background Color
You can use md-colors directive to add background color. He is an example to add the background color in Angular Material.
Angular Material Add Background Color Example:
<h1 md-colors="{backgroundColor:'yellow'}">Tutorialsplane.com</h1>
|
If you run the above example it will produce the output something like this –
Learn More
Let us have some example and demo about the Angular Material Colors.
Add Font Color : Change Text Color
You can use md-colors directive to add font color. He is an example to add the font color using md-colors.
Angular Material Add Background Color Example:
<h1 md-colors="{color:'green'}">Tutorialsplane.com</h1>
|
If You run the above example it will produce output something like this –