📘 Day 9 — Angular Material & UI Mastery

Zero to Hero — Hands-on Angular Tutorial

Today you will learn:

• ✔️ Angular Material Setup
• ✔️ Buttons, Cards, Dialogs, Forms
• ✔️ Responsive Layout (MatSidenav, MatToolbar)
• ✔️ Data Tables with Pagination & Sorting
• ✔️ Custom Theming
• ✔️ Building a professional Dashboard UI

Angular Material is Google’s official UI component library. It makes your app look professional instantly. 🎨

---

🟦 1. Setup Angular Material

Run this command to install everything:

ng add @angular/material

It will ask:

1. Choose a theme: (e.g., Indigo/Pink)
2. Typography: Yes
3. Animations: Yes

Now your app is ready to use Material components.

---

🟩 2. Buttons, Icons & Cards

In Standalone components, you must import the specific Material modules you need.

app.component.ts:

import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatCardModule } from '@angular/material/card';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MatButtonModule, MatIconModule, MatCardModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {}

app.component.html:

<mat-card>
  <mat-card-header>
    <mat-card-title>Angular Material is Awesome</mat-card-title>
    <mat-card-subtitle>UI Components</mat-card-subtitle>
  </mat-card-header>
  
  <mat-card-content>
    <p>This is a material card. It looks customized and clean.</p>
  </mat-card-content>
  
  <mat-card-actions>
    <button mat-raised-button color="primary">Action</button>
    <button mat-icon-button>
      <mat-icon>favorite</mat-icon>
    </button>
  </mat-card-actions>
</mat-card>

• ✔️ mat-raised-button = Button with shadow
• ✔️ mat-icon = Google Material Icons
• ✔️ mat-card = Container for content

---

🟧 3. Material Forms (Clean & Validated)

Material forms allow floating labels and automatic error messages.

Import: MatInputModule and MatFormFieldModule.

app.component.html:

<mat-form-field appearance="outline">
  <mat-label>Email Address</mat-label>
  <input matInput placeholder="user@example.com">
  <mat-icon matSuffix>email</mat-icon>
  <mat-hint>We'll never share your email.</mat-hint>
</mat-form-field>

• ✔️ Floating Label: Moves up when you type.
• ✔️ Suffix Icon: Adds an icon inside the input.
• ✔️ Appearance: ‘fill’ or ‘outline’.

---

🟥 4. Dialogs (Modals)

Let’s create a popup dialog.

Step 1: Create ConfirmDialogComponent.

ng g c confirm-dialog --standalone

Step 2: Open it from AppComponent.

app.component.ts:

import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';

export class AppComponent {
  constructor(private dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(ConfirmDialogComponent, {
      width: '300px',
      data: { message: 'Are you sure?' }
    });
  }
}

app.component.html:

<button mat-flat-button color="warn" (click)="openDialog()">Delete Item</button>

• ✔️ Use MatDialog service to open components as modals.

---

🟫 5. Material Data Table (Professional Grids)

The most powerful component in Angular Material.

Import: MatTableModule, MatPaginatorModule, MatSortModule.

user-table.component.html:

<table mat-table [dataSource]="users" class="mat-elevation-z8">

  <!-- ID Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let user"> {{user.id}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let user"> {{user.name}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="['id', 'name']"></tr>
  <tr mat-row *matRowDef="let row; columns: ['id', 'name'];"></tr>

</table>

user-table.component.ts:

users = [
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'},
  {id: 3, name: 'Charlie'}
];

• ✔️ Scalable table
• ✔️ Sortable & Paginatable (with extra setup)

---

🟦 6. Building a Dashboard Layout (Sidenav + Toolbar)

A standard app layout usually has a top bar and a side menu.

dashboard.component.html:

<mat-toolbar color="primary">
  <button mat-icon-button (click)="sidenav.toggle()">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App Dashboard</span>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav #sidenav mode="side" opened>
    <mat-nav-list>
      <a mat-list-item href="#">Dashboard</a>
      <a mat-list-item href="#">Profile</a>
      <a mat-list-item href="#">Settings</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <h1>Welcome to the Dashboard!</h1>
    <!-- Main content goes here -->
  </mat-sidenav-content>
</mat-sidenav-container>

Import: MatSidenavModule, MatToolbarModule, MatListModule.

---

🟨 7. Custom Theming

Angular Material uses SCSS customization. In styles.scss, you can override colors:

@use '@angular/material' as mat;

$my-primary: mat.define-palette(mat.$indigo-palette);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// Use the theme
$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
  )
));

@include mat.all-component-themes($my-theme);

This changes the entire color scheme of your app instantly.

---

🎉 End of Day 9 — What You Learned

Today you transformed your app from plain HTML to a professional UI:

• ✔️ Installed Angular Material
• ✔️ Built Cards, Buttons, and Layouts
• ✔️ Created Modals (MatDialog)
• ✔️ Built Data Tables
• ✔️ Implemented a Dashboard Sidenav
• ✔️ Learned Custom Theming

Your app now looks ready for production. 🚀

---

🧪 Day 9 Challenge

Build a “Task Manager Dashboard”.

Requirements:

1. Use MatSidenav for navigation (Tasks, Completed, Deleted).
2. Use MatCard to display tasks in a grid.
3. Add a Floating Action Button (FAB) to add a new task.
4. Clicking the FAB opens a MatDialog form.
5. Use MatSnackBar to show a notification when a task is saved.