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

Question

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

Answer 1

try like this :

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