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;
}

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

Как добавить ng-bootstrap компоненты в проект Angular-CLI?

Покажу на примере нового проекта.

ng new project_name
cd project_name
npm install --save bootstrap@next
npm install --save @ng-bootstrap/ng-bootstrap

В angular-cli.json в секцию style надо добавить наш CSS, чтобы глобально подключить стили.

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
17 августа 2017 г. в Angular

RxJS Pipeable Operators

Начиная с версии rxjs 5.5 операторы вместо цепочки вызовов применяются как параметры функции pipe.

Angular environment variables

Создание и использования переменных окружения в Angular с использованием CLI >= 6 версии.

07 января 2019 г. в Angular

@Directive v/s @Component in Angular

Компоненты создают DOM элементы и добавляют к ним поведение, а директивы только добавляют поведение к существующим DOM элементам

13 августа 2018 г. в Angular

TS. Event bus

Создаётся providedIn: 'root' сервис событий. Затем отправляются события на шину, и если какой-либо слушатель подписан на эти события, он получает уведомления.