CODEWITHSUNDEEP
htmlcssangularng-class
Lars
Lars

Reputation: 53

Angular (4 or 2) apply CSS if conditions are met

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

Upvotes: 5

Views: 9579

Answers (4)

Danilo Dughetti
Danilo Dughetti

Reputation: 1370

In HTML:

<i *ngIf="readNews" class="fal fa-cogs fa-5x"></i>
<i *ngIf="!readNews" class="fal fa-cogs fa-5x blink"></i>

And in typescript i would refactor as this to improve readability:

ngOnInit() {
localStorage.setItem('readNews', 'Read');
this.readNews = (localStorage.getItem('readNews') != null || '');

}

Upvotes: -1

Navoneel Talukdar
Navoneel Talukdar

Reputation: 4588

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

Upvotes: 4

Chandru
Chandru

Reputation: 11184

try like this :

<i [ngClass]="readNews ? 'fal fa-cogs fa-5x blink': 'fal fa-cogs fa-5x'"></i>

Upvotes: 6

Miqdad Ali
Miqdad Ali

Reputation: 6147

<i [class.blink]="readNews"></i>

Based on cheat sheet on https://angular.io/guide/cheatsheet

Upvotes: 0

Related Questions