【Angular】Materialのmat-selectを共通化してみた件

import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';

interface Option {
  name: string;
  value: string;
}

@Component({
  selector: 'app-pull-down',
  standalone: true,
  imports: [CommonModule, MatFormFieldModule, MatSelectModule],
  template: `
    <mat-form-field [style.width]="width">
      <mat-select [(value)]="selected" (selectionChange)="change()">
        <mat-option *ngFor="let option of options" [value]="option.value">{{ option.name }}</mat-option>
      </mat-select>
    </mat-form-field>
  `,
})
export class PullDownComponent {
  @Input() width: string;
  @Input() selected!: string;
  @Input() options!: Option[];
  @Output() event = new EventEmitter<string>();

  change() {
    this.event.emit(this.selected);
  }
}

<app-pull-down
  [selected]="selectedIndex"
  [options]="[
    { name: '未選択', value: '-1' },
    { name: 'hoge1', value: '0' },
    { name: 'hoge2', value: '1' },
  ]"
  (event)="changePullDown($event)"
></app-pull-down>