Angular NgStyle and NgClass statements are used to apply CSS styling to HTML elements. These two directives are very useful in customizing the appearance of web pages.
With Angular NgStyle, you can set the style of an element using a JavaScript object.
For example, you can set the color, width, and height of an element. With NgClass, you can set the class of an element using a JavaScript object.
Angular ngClass is Angular directive that can be used to dynamically set the class of an element also use ngClass in angular with condition.
Angular ngStyle allows you to set the style of an element using a JavaScript object, while NgClass lets you set the class of an element using a space-delimited string.
Both directives can be used together to create dynamic and powerful Angular applications.
Call a function inside ngstyle
When it comes to styling an element with ngStyle in angular with condition, there are different ways to style elements in your component templates. One way is to use the ngStyle directive. Angular ngStyle directive lets you set CSS style properties on an HTML element conditionally.
For example, you might want to set the color of an element based on the value of a certain property in your component class.
With angular ngStyle, you can do that easily. All you have to do is bind the style property that you want to the corresponding property in your component class. Then, when that property changes value, Angular will automatically update the element's style accordingly.
To see how this works, let's take a look at ngstyle in angular example.
export class PageComponent {
getFlagColor(country: string) {
switch (country) {
case 'INDIA':
return '#eb9210';
case 'PAKISTAN':
return '#0dc34a';
case 'ENGLAND':
return '#fd1515';
case 'AUSTRALIA':
return '#0d36c3';
case 'FRANCE':
return '#e110eb';
default:
return '#eb9210'
}
}
countries: any[] = [
{
"name": "France",
"country": 'FRANCE'
},
{
"name": "India",
"country": 'INDIA'
},
{
"name": "Pakistan",
"country": 'PAKISTAN'
},
{
"name": "Australia",
"country": 'AUSTRALIA'
},
{
"name": "England",
"country": 'ENGLAND'
}
];
}
<div>
<ul *ngFor="let country of countries">
<li [ngStyle]="{'color':getFlagColor(country)}"> {{ country.name }}</li>
</ul>
</div>
//--------or you could use--------------
<div>
<ul *ngFor="let country of countries">
<li [style.color]="getFlagColor(country)"> {{ country.name }}</li>
</ul>
</div>
Output:
Call a function inside ngClass
Angular ngClass is a built-in directive in Angular that allows you to dynamically set CSS classes on an HTML element. This is especially useful when you want to conditionally apply a CSS class based on some condition.
The "ngClass" directive allows you to dynamically add or remove classes from an element. The classes are added or removed based on a condition.
For example, you could use angular ngclass condition to add a "active" class to an element when the user clicks on it.
To use angular ngClass with a function, first you'll need to create a function that is going to be triggered inside angular ngClass conditionally or not.
To see how this works, let's take a look at ngclass in angular example:
studentsObj = [
{ name: 'yogesh', status: 0 },
{ name: 'Akash', status: 1 },
{ name: 'Vivek', status: 2 },
{ name: 'lovekesh', status: 0 },
{ name: 'Ankush', status: 1 },
{ name: 'Neeraj', status: 1 },
];
getClass(status: number) {
switch (status) {
case 0:
return '';
case 1:
return 'active';
case 2:
return 'unactive';
default:
return 'unactive';
}
}
// Some css for the reference
.student {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
.active, .btn:hover {
background-color: #666;
color: white;
}
<div id="myDIV">
<ng-container *ngFor="let student of studentsObj">
<button class="btn" [ngClass]="getClass(student.status)">{{student?.name}}</button>
</ng-container>
</div>
Output:
Conclusion
In conclusion, it is possible to call a function inside an angular ngstyle and angular ngclass statement in angular.
This can be done by binding the function to a property on the component and using that property in the ngstyle or ngclass statement.
One of the benefits of using ngclass is that it can help keep our template clean and organized. By using directives like ngclass, we can avoid having too many class names in our template. This can make our code more readable and maintainable.
By doing this, you can avoid having to duplicate code or make changes in multiple places.
However, you should be careful to overuse this feature as it can make your code clean and easy to read and debug.
.jpg)
0 Comments