Select Button

참조

app.module.ts

import {MatSelectModule} from '@angular/material/select';

@NgModule({
  imports: [MatSelectModule]
})

select native 사용

select를 사용할 경우 값들은 모두 string 타입이므로 주의 해야 한다.

예제 1

• template

 <select id="player-weapon" (change)="changeWeapon($event)">
  <option *ngFor="let item of weapons;" disabled="" [value]="item.id" [selected]="selectedWeapon === item.id">{{item.name}}</option>
 </select>

• component

public changeWeapon(e: any) {
  const v = e.target.value;
  this.selectedWeapon = v;
  this.selectInt = parseInt(e.target.value, 10) // select를 바로 사용할 경우 value 가 string type이므로 필요에 따라 int type으로 변경한다.
}

mat-select 사용

아래는 angular material에서 select를 사용하는 가장 일반적인 예입니다.
(selectionChange) 와 값을 받을 때는 e.value 로 받는 점이 위와 다릅니다.

• template

<mat-form-field floatLabel="auto">
  <mat-select [value]="selectedCardSet" (selectionChange)="cardSetChange($event)">
    <mat-option *ngFor="let card of cards" [value]="card.value">
      {{card.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

• component

public cardSetChange(e: any): void {
  const v = parseInt(e.value, 10);
  this.selectedCardSet = v;
  this.event.changeCardSet(v);
}