'Angular: change style depending on *ngIf condition

I'm aware that I can do something like this:

<ng-container *ngIf="user.age<18;else over">
  <div class="some-section" style="background-color: red;">
    [...]
  </div>
</ng-container>
<ng-template #over>
  <div class="some-section" style="background-color: blue;">
    [...]
  </div>
</ng-template>

Although this works, it is duplicate code. Is there a way to change only the style so that there's no duplicates (scss, other angular tools, ...)?

cssangularsassangular-ng-if


Solution 1:[1]

This is one way to do it check out this stackblitz

<div class="some-section" style="background-color: {{age < 18 ? 'red' : 'blue'}}">
  Test
</div>

Solution 2:[2]

The simplest way to do that:

  <div class="some-section"
       [style.backgroundColor]="age > 18 ? 'red' : 'blue'">
    [...]
  </div>

stackblitz

Solution 3:[3]

Too change a style depending on a condition, you only have to use this:

[style.xxx]="expression"

Example:

<div class="some-section" [style.backgroundColor]="age < 18 ? 'red' : 'blue'">

Or via function, for more "complex" calculations without messing up HTML

<div class="some-section" [ngStyle]="calculateStyles()">

calculateStyles() {
   if (user.age<18) { 
      return "background-color: red";
   } else {
      return "background-color: blue";
   }
}

And then, the "better" way to manage your styles depending on conditions, using a class instead of just just "styles":

[ngClass]="expression"

Example:

<div class="some-section" [ngClass]="{'classACSS': user.age<18, 'classBCSS': user.age>=18}"

.classACSS {
background-color: red;
}

.classBCSS {
background-color: blue;
}

I leave you HERE the doc with a more detailed explanation of all of this.

Solution 4:[4]

<div class="some-section" [style.backgroundColor]="age < 18 ? 'red' : 'blue'">

Solution 5:[5]

<div class="some-section" *ngIf="user.age<18" style="background-color:red;">
  [...]
</div>
<div class="some-section" *ngIf="user.age>18" style="backdrop-color:blue">
  [...]
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 alphapilgrim
Solution 2
Solution 3
Solution 4 Eitzaz shah
Solution 5 Robin Chauhan

Related Questions