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

当ページのリンクには広告が含まれています。
【Angular】Materialのmat-selectを共通化してみた件
いずみ

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

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

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

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

いずみ

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

僕疲れちゃってぇ〜。

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

いずみ

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

執筆者/監修者
  • フリーランスエンジニア(保有資格個)
  • ブログ・アフィリエイト歴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。

まとめ

今回は、Angular Materialのmat-selectを共通化する方法を解説しました。

以下が本記事のまとめになります。

まとめ
  • Angular Materialのmat-selectの共通化は超簡単。
  • 共通コンポーネントはスタンドアロンで作成するべし。
まとめ♪
  • おすすめ本
¥4,070 (2023/07/23 15:56時点 | Amazon調べ)

Angularの勉強なら「」が分かりやすくておすすめですよ♪

いずみ

最後までお読みいただき、ありがとうございました!

  • クソおすすめ本
¥4,480 (2024/06/01 23:28時点 | Amazon調べ)
いずみ

海外のエンジニアがどういった思考で働いているかが理解できます。

海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです(本当におすすめな本しか紹介しないのでご安心を)。

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

この記事が気に入ったら
フォローしてね!

シェアしてね!
  • URLをコピーしました!
目次