この記事で解決できる悩み
いずみこんな悩みを解決できる記事を書きました！
僕は現役フリーランスエンジニア（歴8年）で、資格は13個保有しています。
「Angular Materialのmat-buttonを共通化してみたい」とお考えではありませんか？
ボタンを共通化すれば、CSSやらロジックやらを共通化できるので幸せになれます。
いずみ共通化するなら早めにやりましょうね…
僕はめちゃくちゃ後悔したことありますんで…
本記事を読めば、Angular Materialのmat-buttonを共通化する方法が分かるので早速見ていきましょう！
いずみすぐ読み終わるので、ぜひ最後まで読んでくださいませ。
目次
前提
- 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の勉強なら「Angularアプリケーションプログラミング
」が分かりやすくておすすめですよ♪
いずみ最後までお読みいただき、ありがとうございました！
- クソおすすめ本
いずみ海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです（本当におすすめな本しか紹介しないのでご安心を）。
