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

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

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

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

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

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

いずみ

共通化するなら早めにやりましょうね…

僕はめちゃくちゃ後悔したことありますんで…

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

いずみ

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

執筆者/監修者
  • フリーランスエンジニア(保有資格個)
  • ブログ・アフィリエイト歴5年
  • ブランドせどりで月利50万円⇨脱サラ
  • 投資歴5年(仮想通貨・FXが得意)
  • Twitterフォロワー約2,000人
  • 運営者情報はこちら
いずみです
目次

前提

  • Angular:14

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

早速ですが、Angular Materialのmat-buttonを共通化する方法を解説します。

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

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-button (event)="click()">ボタン</app-button>
いずみ

これでOK!

スタンドアロンコンポーネント、クソ便利。

まとめ

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

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

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

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

いずみ

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

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

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

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

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

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

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