Using Enum Values in Angular Templates

Image by Willgard Krause from Pixabay

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

Brought to You By

Firefly Semantics Supply Chain and Big Data Analytics for the Cloud