Angular Material Component Library Skill

Rules

Setup and Configuration

• Must install @angular/material, @angular/cdk, @angular/animations
• Must configure provideAnimations() in app.config.ts
• Must import specific Material modules (e.g., MatButtonModule, MatIconModule)
• Must NOT import all Material modules with wildcard (import * as Material)

Form Controls

• Must wrap all matInput in <mat-form-field> with <mat-label>
• Must use appearance="outline" or appearance="fill" for form fields
• Must use Reactive Forms with Material form controls
• Must provide validation error messages with <mat-error>
• Must use MatDatepickerModule with MatNativeDateModule for date pickers