Where to put conditional rendering logic in Angular?

Question

I am working on a component where I need to show different icons based on a status:

component.html

<app-form-row label="Status">
    <span>
      <i *ngIf="getStatus === 'READY'" class="check circle outline icon green"></i>
      <i *ngIf="getStatus === 'UPDATING'" class="notched circle loading icon orange"></i>
      <i *ngIf="getStatus === 'FAILED'" class="times circle outline icon red"></i>
    </span>
</app-form-row>

component.ts

get getStatus(): string {
    return this.data.status;
  }

Another approach is to move the condition in TS.

component.html

<app-form-row label="Status">
    <span>
      <i [ngClass]=“classByStatus"></i>
    </span>
</app-form-row>

component.ts

get classByStatus(): string {
    return {
      'READY': 'check circle outline icon green',
      'UPDATING': 'notched circle loading icon orange',
      'FAILED': 'times circle outline icon red'
    }[this.data.status];
  }

What are the pros and cons for each approaches?
Any other way to solve this use case?

That should probably be ngSwitch, but use whichever you prefer. — jonrsharpe
– jonrsharpe, Commented Aug 10, 2021 at 12:41

Barremian · Accepted Answer · 2021-08-10 12:55:44Z

4

TBH, both are bad approaches. Binding a function to a directive (and also in template interpolation {{ }}) with default change detection strategy would trigger the function for each change detection cycle. It might not be a huge issue initially, but might lead to performance issues later.

Ideal solution would be to apply the conditions directly in the ngClass

<i
  class="circle icon"
  [ngClass]="{
    'READY': 'check outline green', 
    'UPDATING': 'notched loading orange', 
    'FAILED': 'times outline red'
  }[data.status]"
>
</i>

answered Aug 10, 2021 at 12:55

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Where to put conditional rendering logic in Angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related