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

2025年1月17日

当ページのリンクには広告が含まれています。

この記事で解決できる悩み

Angular Materialのmat-inputを共通化する方法は？

いずみ

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

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

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

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

いずみ

とにかく共通化や！

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

いずみ

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

執筆者／監修者

フリーランスエンジニア（保有資格13個）
ブログ・アフィリエイト歴5年
ブランドせどりで月利50万円⇨脱サラ
投資歴5年（仮想通貨・FXが得意）
X（旧Twitter）フォロワー約1,900人
運営者情報はこちら

いずみです

前提

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）