Updated April 5, 2023
Introduction to Angular material color
By using Angular material we can modify the color of component and choose the color we want, for this material provide us themes by which we can style our components this make use of google material design. It provides us Palettes it represents the collection of color and each value inside this collection is called HUE. In order to identify the numbers from the Palettes, it is associated with one unique number, this number can be used to color the component with the number chosen from the Palettes. In material, we can use one selector to color the background of the component, which we will see in the coming part of the article, also how we can make use of Palettes and Material design in order to implement and color our component in detail.
Syntax
In this section we will have closer look at the syntax which can be used to color our component in Angular using material, let’s get started with the basic syntax understanding see below;
<h1 md-colors="{backgroundColor:'color'}">your label</h1>As you can see in the above syntax we are making use of ‘md-colors’ which can be used to color the background of the component. we can specify the color we want either from the Palettes or directly here. In the coming section, we will see how we can change the color of components using material color in detail for better understanding and clarity.
How Color Work in Angular material?
As we have seen material design provides us Palette to choose the color which helps us to design and style our component by just specifying the color we want. They have also come up with the color picker tool which all the number and codes which we can use to color our component. Below find the URL which helps you too choose the correct color and help with the color number as well;
You can choose the color from the below link which contain the tool for color picker:
URL: https://material.io/design/color/the-color-system.html#color-theme-creation
By using material color we can color our brand or component they provide us primary and secondary color to our, which we can choose to color our component in material or angular application. We have three types see below;
1) Primary color
2) secondary color
3) Light and dark variant
Now we will have closer look at the syntax of using the material, color inside the HTML component let’s get started;
e.g. :
<button md-colors="{backgroundColor:'green'}" md-justified class="line">Basic</button>As you can see in the above piece of code we are making use of the ‘md-colors’ directive to color our component and change the theme a well. But we are following the standard which is given by material to use it, inside the {} curly braces we can specify the property we want to change and also the color. Here either we can specify the number or the color code which is defined by the material design color. follow the above link to get a better understanding about the color code and numbers and how to use them.
In angular material palette is represented as the SAAS map, which can be created using the below piece of code and you can change it as per your need;
$green-palette: (
50: #e8eaf6,
100: #c5cae9,
200: #9fa8da,
300: #7986cb,
// they will continue to the 900
contrast: (
50: rgba(black, 0.87),
100: rgba(black, 0.87),
200: rgba(black, 0.87),
// they will continue to the 900
)
);You can specify the palette like above, here we are creating and specifying the color numbers ad codes, till 900. This code represents the number in general but with this codes we need to specify the color name as well in order to use it, because every color uses the same codes from 0 to 900 to represent their number for different shades of color we ca say. Material also provide the distinct code like below;
- A100
- A200
- A300
- and so on to represent the different shades.
Angular material also provides us default theme with default color to the component we can use them like below and let’s see each of them:
1) purple-green.css: It would be light. with palette purple, green, red.
2) indigo-pink.css: It would be light. with indigo, pink, red
3) deeppurplr-amber.css: It would be dark. with deep-purple, amber, red
4) pink-bluegrey.css: It would be dark. with blue-green, pink, red
Example of Angular material color
Below is the sample example using material color and the color picker provided by them, we can pick any color and color component as we want, follow below code to changes in the component color with index.html has to be same as below in order to import al the js files.
1) index.html code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">2) controller code:
<script language="javascript">
angular
.module('myApp', ['ngMaterial'])
.controller('MydemoColorController', function ($scope) {
// you can wirte your logic as per requrenemnt ..//
});
</script>3) HTML code:
<body ng-app="myApp">
<div ng-controller="MydemoColorController" ng-cloak="" >
<md-content class="md-padding" layout-xs="column" layout="row">
<div flex-xs="" flex-gt-xs="100" layout="column">
<h1 md-colors="{backgroundColor:'lime-300'}">Demo using material color !!</h1>
</div>
</md-content>
<button md-colors="{backgroundColor:'green'}" md-justified class="line">Basic</button>
<button md-colors="{backgroundColor:'yellow'}">One</button>
<button md-colors="{backgroundColor:'pink'}">Two</button>
<button md-colors="{backgroundColor:'red'}">Three</button>
<button md-colors="{backgroundColor:'purple'}">Four</button>
<button md-colors="{backgroundColor:'red-100'}">Five</button>
<button md-colors="{backgroundColor:'blue-700'}">Sic</button>
<button md-colors="{backgroundColor:'Teal-100'}">Seven</button>
</div>
<br />
<div md-colors="{background: 'pink-800'}" md-justified class="line">
<span>800</span>
<span> I am pink </span>
</div>
<br />
<div md-colors="{background: 'brown-200'}" md-justified class="line">
<span>200</span>
<span> I am brown</span>
</div>
<br />
<div md-colors="{background: 'green-A200'}" md-justified class="line">
<span>200</span>
<span> I am green</span>
</div>
<br />
<div md-colors="{background: 'grey-500'}" md-justified class="line">
<span>200</span>
<span> I am green</span>
</div>
</body>Output:
Conclusion
It is easy to use material color also, we are using it in angular.js application, we have already seen it some internal working in detail with a practice example how to change the color of component as well as the theme, it is provided by google material design. We have to make some configuration in order to use it, it is not something which can be used directly.
Recommended Articles
We hope that this EDUCBA information on “Angular material color” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
