この記事で解決できる悩み
いずみこんな悩みを解決できる記事を書きました！
僕は現役フリーランスエンジニア（歴8年）で、資格は13個保有しています。
「Angular Materialのmat-inputを共通化してみたい」とお考えではありませんか？
inputを共通化すれば、CSSやらロジックやらを共通化できるので幸せになれます。
いずみとにかく共通化や！
本記事を読めば、Angular Materialのmat-inputを共通化する方法が分かるので早速見ていきましょう！
いずみすぐ読み終わるので、ぜひ最後まで読んでくださいませ。
目次
前提
- Angular：14
【Angular】Materialのmat-inputを共通化する方法
早速ですが、Angular Materialのmat-inputを共通化する方法を解説します。
共通inputコンポーネント
import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
@Component({
selector: 'app-input',
standalone: true,
imports: [CommonModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
template: `
<mat-form-field [style.width]="width">
<input matInput [attr.required]="required" [formControl]="control" [placeholder]="placeholder" />
</mat-form-field>
`,
})
export class InputComponent {
@Input() control!: FormControl;
@Input() placeholder: string;
@Input() required: boolean = false;
@Input() width: string;
}呼び出し元
<!-- サンプル1 -->
<app-input width="400px" [control]="control"></app-input>
<!-- サンプル2（プレースホルダー付き） -->
<app-input placeholder="うんこ" [control]="control" [required]="true"></app-input>これで完璧やで！（謎テンションw）
まとめ
今回は、Angular Materialのmat-inputを共通化する方法を解説しました。
以下が本記事のまとめになります。
- おすすめ本
Angularの勉強なら「Angularアプリケーションプログラミング
」が分かりやすくておすすめですよ♪
いずみ最後までお読みいただき、ありがとうございました！
- クソおすすめ本
いずみ海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです（本当におすすめな本しか紹介しないのでご安心を）。
