How to change style property in angular with if statement

Question

Below question is in angular 7

<header class="stick-top forsticky gradient">

Here is my html content in angular

current_path = localStorage.getItem("current_path");

current path is a variable in my component.

I wants to make if current_path != '/' in component then heder will be like this.

<header class="stick-top forsticky gradient">

else

<header class="stick-top forsticky">

I wants to remove gradient class from hrader tag if my current_path is '/'

score 4 · Answer 1 · answered Feb 03 '19 at 08:41

4

you can use ngClass:

<header class="stick-top forsticky" [ngClass]="{'gradient':current_path != '/'}">

answered Feb 03 '19 at 08:41

Fateme Fazli

score 2 · Answer 2 · answered Feb 03 '19 at 08:46

If it is a single class, a good enough alternative to ngClass is

<header class="stick-top forsticky" [class.gradient]=" current_path != '/' " >

You may prefer this syntax since it is easier to format and prettify in the html templates than js objects that resolve to classes.

2 Answers2