How to Set Style Dynamically in Angular 8?
In this post we will give you information about How to Set Style Dynamically in Angular 8?. Hear we will give you detail about How to Set Style Dynamically in Angular 8?And how to use it also give you demo for it if it is necessary.
If you want to set style dynamically in angular 8 then i will help you to apply style dynamically in angular component. i will give three example of set inline style css dynamically in angular js.
we will use ngStyle for set dynamically style in angular 8. we can use ngStyle attribute in angular templates.
I will give you three example of angular 8 set style width dynamically example. we will use simple way and also i will give you example using component and change dynamically style css.
Example 1:
In first example, we will use ngStyle and write all inline css on that attribute, it is a very simple example:
app.component.html
<h1 [ngStyle]="{'color':'red', 'font-weight':'bold'}">
This is ItSolutionStuff.com Example
</h1>
Example 2:
In second example, we will write css on component file and we will use that css variable in ngStyle directive in html file:
app.component.ts
import { Component,HostListener, Inject } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
headingCss = {
'color':'red',
'font-weight':'bold'
};
}
app.component.html
<h1 [ngStyle]="headingCss">
This is ItSolutionStuff.com Example
</h1>
Example 3:
In third example, we will create one array with each key has different css value in component and we will use it in html template file.
app.component.ts
import { Component,HostListener, Inject } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
categories = [
{
'name':'Laravel',
'color': 'red',
},
{
'name':'Codenigter',
'color': 'orange',
},
{
'name':'Angular',
'color': 'green',
}
];
}
app.component.html
<ul>
<li [ngStyle]="{'color':category.color}" *ngFor="let category of categories">
{{ category.name }}
</li>
</ul>
I hope it can help you…
Hope this code and post will helped you for implement How to Set Style Dynamically in Angular 8?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs