Angular Material Color

Angular Material Color
Techiio-author
Written by Sagar RabidasJanuary 14, 2022
7 min read
Angular
2 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 2 VIEWS SHARE
Techiio-author
Sagar Rabidas

Software Developer

In this blog, we will discuss Angular material color

Angular material color:-

By way of the use of angular fabric, we can modify the color of aspect and pick the coloration we need, for this material offer us topics using which we will style our components this make use of google fabric design. It offers us palettes it represents the gathering of color and each price internal this series is called hue. To become aware of the numbers from the palettes, it's far related to one specific number, this quantity can be used to coloration the aspect with the range chosen from the palettes. In cloth, we will use one selector to coloration the history of the element, which we can see within the coming part of the thing, also how we can make use of palettes and fabric design to put in force and color our element in element.

Syntax:-

In this section we will have closer look at the syntax which can be used to color our component in Angular using the 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 does Color Work in Angular material?

As we have seen material design provides us with 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 numbers 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>

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
)
);

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 to import all the js files.

  • 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">
  • controller code:
<script language="javascript">
angular
.module('myApp', ['ngMaterial'])
.controller('MydemoColorController', function ($scope) {
// you can wirte your logic as per requrenemnt ..//
});
</script>
  • 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>

Angular
AngularJs
Angular2
Angular7
Angularmaterialcolor
2 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 2 VIEWS SHARE
Was this blog helpful?
techiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plan
You must be Logged in to comment
Code Block
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance