Angular Material Colors


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>

Try it »

Note : Colors may not support in lower versions of the angular material so we have used angular-material.min.js 1.1.1 version.

If you run the above example it will produce the output something like this –

Angular Material Colors Example!


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>

Try it »

If You run the above example it will produce output something like this –

Angular Material Colors Example


Advertisements

Add Comment

📖 Read More