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;

}

MoxxiManagarm · Accepted Answer · 2022-10-20 10:20:39Z

1

A pipe is not a solution for that. With a pipe you could only shorten the ngClass assignment like this:

<div class="font-bold" [ngClass]="item.license | getClassName">

What you need instead is a directive you can reuse. For example:

import { Directive, HostBinding, Input } from '@angular/core';

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

const STATUS_COLOR_MAP: Record<Status, string> = {
  [Status.Active]: '#32CD32',
  [Status.None]: '#CD7F32',
  [Status.Processing]: '#0000ff',
  [Status.Expiring]: '#ff0000',
};

@Directive({
  selector: '[appStatusColorDirective]',
})
export class StatusColorDirective {
  @HostBinding('style.color')
  color: string;

  @Input()
  set myStatus(key: Status) {
    this.color = STATUS_COLOR_MAP[key];
  }
}

With example template

<div class="font-bold" appStatusColorDirective myStatus="Active">Active</div>
<div class="font-bold" appStatusColorDirective myStatus="None">None</div>
<div class="font-bold" appStatusColorDirective myStatus="Processing">
  Processing
</div>
<div class="font-bold" appStatusColorDirective myStatus="Expiring">
  Expiring
</div>

Try it here: https://stackblitz.com/edit/angular-r6jac8?file=src/app/app.component.ts

answered Oct 20, 2022 at 10:20

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

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

1 Comment

Hamza Marwani Over a year ago

i think a directive is not the best practise here but i really appreciate your help and effort

Jovana · Accepted Answer · 2022-10-20 09:59:57Z

0

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>

answered Oct 20, 2022 at 9:59

Jovana

6081 gold badge6 silver badges21 bronze badges

1 Comment

Hamza Marwani Over a year ago

Thank you for your reply ,it is ineed working but i want to use a pipe in angular to create this filer,if you have any idea please help me

Eliseo · Accepted Answer · 2022-10-20 10:52:16Z

0

A pipe it's only a class with a function "transform" that received a value and return "what-ever", but, Really it's not the best aproach to change a class or a color

E.g.

export class StatusPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    if (value == Status.Active) return 'activeClass';
    if (value == Status.None) return 'reviewClass';
    return null;
  }
}

See stackblitz

answered Oct 20, 2022 at 10:52

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

1 Comment

Hamza Marwani Over a year ago

thank you i think also it is not the best practise but i need to make it like that for a professional reasons thank you for your reply

Muhammad Ahsan · Accepted Answer · 2022-10-20 11:26:53Z

0

you can do it in a more simple fashion without the need for pipes.

https://stackblitz.com/edit/angular-ivy-saycxm?file=src/app/app.component.html

answered Oct 20, 2022 at 11:26

Muhammad Ahsan

1347 bronze badges

Collectives™ on Stack Overflow

Creating angular pipe using enum values

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related