Using Enum Values in Angular Templates

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store