Using string enum value in HTML component in angular

Question

Imagine the following string enum, which is defined in a component.ts:

export enum SortType {
 Date = 'date',
}

I want to use the value of the enum in the corresponding HTML-component: <th mat-sort-header=??? >

Something like that: <th mat-sort-header='SortType.Date' >.

Ashish Ranjan · Accepted Answer · 2020-05-12 14:30:51Z

2

Assign the value of imported Enum in a class property.

import { SortType } from '.....path'

@component({data})
export class YourComponent  {
  sortEnum = SortType;
}

Use in your HTML

<th mat-sort-header="{{sortEnum.Date}}" >.

edited May 12, 2020 at 14:30

answered May 12, 2020 at 14:16

Ashish Ranjan

13k5 gold badges32 silver badges53 bronze badges

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

2 Comments

Link Over a year ago

That brings me the exact same string. I have a console.log(sort.active) in the sort-function of mat-sort (matSort (matSortChange)="sort($event)). In this case it shows me 'sortEnum.Date' instead of 'date'

Ashish Ranjan Over a year ago

@Link I am sorry, misssed the interpolation

Arun Mohan · Accepted Answer · 2020-05-12 14:16:06Z

1

In ts create a class property as public sortEnum=SortType and access in html

public sortEnum=SortType

answered May 12, 2020 at 14:16

Arun Mohan

1,2271 gold badge7 silver badges11 bronze badges

Collectives™ on Stack Overflow

Using string enum value in HTML component in angular

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related