【Angular】Materialのmat-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>