📘

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

2024/07/26に公開

Angular

オッス、俺泉（@izumin_0401）！！

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

mat-inputをとにかく共通化したいお年頃。

ソースコード

共通inputコンポーネント

input.component.ts

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;
}

呼び出し側

app.component.html

<!-- サンプル1 -->
<app-input width="400px" [control]="control"></app-input>

<!-- サンプル2（プレースホルダー付き） -->
<app-input placeholder="うんこ" [control]="control" [required]="true"></app-input>

これで毎回「mat-form-field」を書く必要もなくなるのだ！

まとめ

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

mat-form-fieldが色んな箇所に記載されていてキモすぎたのでスッキリ。

最後に

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