【Angular】Materialのmat-buttonを共通化してみる

コーヒーが大好きで頻繁に飲むのはいいが、いつもお腹を下す泉（@izumin_0401）です。

Angular Materialのコンポーネントを共通化したい

Angularを触っていると、色んなところにMaterialの部品が散らかってしまい、収拾がつかないことありますよね？（僕はある）

ということで、とりあえずmat-buttonを共通化する際のサンプルを書いてみた。

ソースコード

共通ボタンコンポーネント

button.component.ts

import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Output } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-button',
  standalone: true,
  imports: [CommonModule, MatButtonModule],
  template: `
    <button mat-button (click)="click()">
      <ng-content></ng-content>
    </button>
  `,
  styles: [
    `
      button {
        /* 何かしらのCSS */
      }
    `,
  ],
})
export class ButtonComponent {
  @Output() event = new EventEmitter();

  click() {
    if (this.event) {
      this.event.emit();
    }
  }
}

呼び出し側

app.component.html

<app-button (event)="click()">ボタン</app-button>

共通化するだけなら簡単だから、なるべく早めにやっちゃおうね！

まとめ

Angular Materialの共通ボタンコンポーネントを作ってみた。

コンポーネントを共通化するとCSSとかをまとめられるので嬉しいピヨ。

それにしても、スタンドアロンコンポーネント、、、好き♡

最後に

暇つぶしにTwitterとブログもやってるので見てね。