Angular. Enum values in template

Angular не позволяет напрямую использовать перечислимый тип (Enum) в шаблонах. Необходимо создавать свойство, которому присваивать выбранный Enum и в шаблоне использовать это свойство.

import { Component, Input } from '@angular/core';

enum Size = {
  XLarge,
  Large,
  Medium,
  Small
}

@Component({
    selector: 'app-size-select',
    template: `
        <select [ngModel]="selectedSize">
            <option value="{{ size.XLarge }}">Extra Large</option>
            <option value="{{ size.Large }}">Large</option>
            <option value="{{ size.Medium }}">Medium</option>
            <option value="{{ size.Small }}">Small</option>
        </select>    
    `
})
export class SizeSelectComponent { 
    @Input() selectedSize: Size;
    size = Size;
}

Похожие записи

#local variable внутри *ngIf

Представлены 2 варианта решения, как сослаться на локальную переменную шаблона (#myVar) за пределами шаблона:

  • @ViewChild
  • @ViewChildren
13 февраля 2019 г. в Angular

@Attribute() декоратор

Аналогично @Input() позволяет получить значение атрибута с хоста компонента/директивы, но не отслеживает дальнейшее изменение атрибута.

15 сентября 2019 г. в Angular