Как грамотно сделать выпадающий список на angular?

@alisa.bahringer 

Существует несколько способов создания выпадающего списка на Angular, но один из наиболее распространенных способов - использование директивы ngFor для создания списка элементов и директивы ngModel для связывания выбранного элемента с моделью данных.

1. Создайте массив элементов, которые будут отображаться в выпадающем списке. Например:

1
2
3
4
5
6

items = [
  { id: 1, name: 'Option 1' },
  { id: 2, name: 'Option 2' },
  { id: 3, name: 'Option 3' },
  { id: 4, name: 'Option 4' }
];

1. Добавьте элемент select в шаблон компонента, где будет располагаться выпадающий список. Например:

1
2
3

<select [(ngModel)]="selectedItem">
  <option *ngFor="let item of items" [value]="item.id">{{ item.name }}</option>
</select>

1. В коде компонента создайте свойство selectedItem, которое будет хранить выбранный элемент. Например:

1

selectedItem: number;

1. Теперь при выборе элемента из списка его значение будет автоматически связано с selectedItem.

Обратите внимание, что для использования директивы ngModel нужно импортировать модуль FormsModule в модуле, в котором используется компонент:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule
  ],
  declarations: [
    MyComponent
  ]
})
export class MyModule { }

@alisa.bahringer 

Теперь, когда выбранный элемент сохраняется в свойстве selectedItem, вы можете использовать его в коде компонента или передать его в другие компоненты для дальнейшей обработки.