Angular Material

Angular Material is the official UI component library - like a ceremonial tea set.

Installation

1ng add @angular/material
2
3# Choose:
4# - Pre-built theme (e.g., Indigo/Pink)
5# - Global typography styles
6# - BrowserAnimationsModule animations

Basic Components

1import { Component } from '@angular/core';
2import { MatButtonModule } from '@angular/material/button';
3import { MatCardModule } from '@angular/material/card';
4import { MatIconModule } from '@angular/material/icon';
5import { MatInputModule } from '@angular/material/input';
6import { MatFormFieldModule } from '@angular/material/form-field';
7import { MatToolbarModule } from '@angular/material/toolbar';
8import { MatMenuModule } from '@angular/material/menu';
9
10@Component({
11  selector: 'app-dojo-dashboard',
12  standalone: true,
13  imports: [
14    MatButtonModule,
15    MatCardModule,
16    MatIconModule,
17    MatInputModule,
18    MatFormFieldModule,
19    MatToolbarModule,
20    MatMenuModule
21  ],
22  template: \`
23    <!-- Toolbar -->
24    <mat-toolbar color="primary">
25      <span>Dojo Dashboard</span>
26      <span class="spacer"></span>
27      <button mat-icon-button [matMenuTriggerFor]="menu">
28        <mat-icon>more_vert</mat-icon>
29      </button>
30      <mat-menu #menu="matMenu">
31        <button mat-menu-item>Settings</button>
32        <button mat-menu-item>Logout</button>
33      </mat-menu>
34    </mat-toolbar>
35
36    <!-- Cards -->
37    <mat-card>
38      <mat-card-header>
39        <mat-card-title>Samurai Profile</mat-card-title>
40        <mat-card-subtitle>Clan: Tokugawa</mat-card-subtitle>
41      </mat-card-header>
42      <mat-card-content>
43        <mat-form-field appearance="outline">
44          <mat-label>Name</mat-label>
45          <input matInput placeholder="Enter name">
46          <mat-icon matPrefix>person</mat-icon>
47        </mat-form-field>
48      </mat-card-content>
49      <mat-card-actions align="end">
50        <button mat-button>Cancel</button>
51        <button mat-raised-button color="primary">Save</button>
52      </mat-card-actions>
53    </mat-card>
54  \`,
55  styles: [\`
56    .spacer {
57      flex: 1 1 auto;
58    }
59    mat-card {
60      max-width: 400px;
61      margin: 2rem auto;
62    }
63  \`]
64})
65export class DojoDashboardComponent {}

Custom Material Theme

1// custom-theme.scss
2@use '@angular/material' as mat;
3
4// Define colors
5$samurai-primary: mat.m2-define-palette((
6  50: #fce4ec,
7  100: #f8bbd9,
8  500: #c41e3a,  // main
9  700: #ad1457,
10  contrast: (
11    50: rgba(black, 0.87),
12    500: white,
13  )
14));
15
16$samurai-accent: mat.m2-define-palette(mat.$m2-amber-palette);
17
18// Create theme
19$samurai-theme: mat.m2-define-light-theme((
20  color: (
21    primary: $samurai-primary,
22    accent: $samurai-accent,
23  ),
24  typography: mat.m2-define-typography-config(),
25  density: 0,
26));
27
28// Apply theme
29@include mat.all-component-themes($samurai-theme);