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

2024年12月26日

当ページのリンクには広告が含まれています。

この記事で解決できる悩み

Angular Materialのmat-selectを共通化する方法は？

いずみ

こんな悩みを解決できる記事を書きました！

僕は現役フリーランスエンジニア（歴9年）で、資格は13個保有しています。

「Angular Materialのmat-selectを共通化してみたい」とお考えではありませんか？

プルダウンを共通化すれば、CSSやらロジックやらを共通化できるので幸せになれます。

いずみ

色んな箇所に同じ記載があって疲れちゃってぇ〜。

僕疲れちゃってぇ〜。

本記事を読めば、Angular Materialのmat-selectを共通化する方法が分かるので早速見ていきましょう！

いずみ

すぐ読み終わるので、ぜひ最後まで読んでくださいませ。

執筆者／監修者

フリーランスエンジニア（保有資格13個）
ブログ・アフィリエイト歴5年
ブランドせどりで月利50万円⇨脱サラ
投資歴5年（仮想通貨・FXが得意）
Twitterフォロワー約2,000人
運営者情報はこちら

いずみです

前提

Angular：14

【Angular】Materialのmat-selectを共通化する方法

早速ですが、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>

いずみ

もっといい書き方ある気がするけど一旦OK。