Using Enum Values in Angular Templates | Task

Ole Ersoy
Feb - 04  -  1 min

Scenario

We want to use these enum values:

export enum SocialMediaType {
   TWITTER,
   FACEBOOK,
   LINKEDIN
}

As input values for our Angular SocialIconComponent like this:

<fs-social-icon [topic]="topic" [type]="SMT.TWITTER"></fs-social-icon>

Approach

In order to gain access to the enum values in the app.component.html template we need to create a reference to the SocialMediaType within the AppComponent.

public SMT = SocialMediaType;

We can now use use this reference to set the input:

<fs-social-icon [topic]="topic" [type]="SMT.TWITTER"></fs-social-icon>

Demo