Creating angular pipe using enum values

Question

I want to create a pipe using enum values to show me text colors depending on the status. this is my enum class :

export  enum Status {
  Active = 'Active',
  None = 'None',
  Processing = 'Processing',
  Expiring ='Expiring'
}

AndIi was doing this using ngClass, depending on the status the color of text changes, this what I have done :

<div class="font-bold" [ngClass]="{activeClass: item.license=='Active',
           reviewClass: item.license=='None'}">
             {{item.license}}</div></div>

active and review are two css classes :

.activeClass {
 color: #32CD32;
 
}

.reviewClass {
 color: #CD7F32;

}

Answer 1

In order to use enums in template, you need to declare it in .ts file. The solution for you problem would be:

component.ts

status = Status;

Also you need to modify template like so:

component.html

<div class="font-bold" [ngClass]="{'activeClass': item.license==status.Active,
           'reviewClass': item.license==status.None}">
             {{item.license}}
</div>