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

--

--

--

Founder of Firefly Semantics Corporation

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Enumeration in .NET III — Enumerable.Empty<T>()

React Development for Senior Developers — From a Product Point of View

JavaScript Monads Made Simple

Vim for Colab

How to build a CLI tool in NodeJS 💻

Solidity — Structs

Separating Touch and Mouse Events in Your JavaScript Games

A Model Modal in React

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
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation

More from Medium

Exploring Bootstrap 5 with Angular — Creating Dropdown

Animating a counter with Angular — Using requestAnimationFrame()

Angular material table with initial sort header

How to create your own libraries and link it to local use in Angular?