I've found some code examples that explain how I can apply a class item if conditions are met.
In my .ts file I have the following:
private readNews : boolean = false;
[..]
ngOnInit() {
localStorage.setItem('readNews', 'Read');
if (localStorage.getItem('readNews') != null || '') {
this.readNews = true;
}
}
In my HTML I have the following inline CSS:
<i class="fal fa-cogs fa-5x"></i>
However, what I want it to be is the following:
If this.readNews === true
<i class="fal fa-cogs fa-5x blink"></i>
So it needs to add 'blink' in the CSS when the news is read (which is saved in localStorage).
try like this :
<i [ngClass]="readNews ? 'fal fa-cogs fa-5x blink': 'fal fa-cogs fa-5x'"></i>
Use ngClass
<i [ngClass]="(readNews == 'Read')? 'fal fa-cogs fa-5x blink':'fal fa-cogs fa-5x'" ></i>
or you can call custom functions
[ngClass]="getClass()"
getClass(flag:string) {
let cssClasses;
if(localStorage.getItem('readNews') == 'Read') {
cssClasses = {
'fal': true,
'fa-cogs': true,
'fa-5x': true,
'blink': true
}
} else {
cssClasses = {
'fal': true,
'fa-cogs': true,
'fa-5x': true,
'blink': false
}
}
return cssClasses;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With