Angular Material - Textnotes

Angular Material

Angular Material is a UI component library that follows Google’s Material Design guidelines. It provides pre-built, well-styled components to speed up development and improve UI consistency.

1. Material Setup

Install Angular Material using Angular CLI:


ng add @angular/material
  1. Select a theme (prebuilt or custom)
  2. Enable global typography
  3. Enable animations (recommended)

Import BrowserAnimationsModule in AppModule:


import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
imports: [BrowserAnimationsModule]
})
export class AppModule { }

2. Material Components

2.1 Buttons

Angular Material provides styled buttons:


<button mat-button>Basic</button>
<button mat-raised-button color="primary">Primary</button>
<button mat-icon-button>
<mat-icon>favorite</mat-icon>
</button>

2.2 Forms

Use Material form fields for input elements:


<mat-form-field appearance="fill">
<mat-label>Username</mat-label>
<input matInput placeholder="Enter username">
</mat-form-field>

<mat-form-field appearance="outline">
<mat-label>Email</mat-label>
<input matInput placeholder="Enter email">
</mat-form-field>
  1. Also includes checkboxes, radio buttons, sliders, and select dropdowns

2.3 Navigation

Material provides navigation components:


<mat-toolbar color="primary">My App</mat-toolbar>

<mat-sidenav-container>
<mat-sidenav mode="side" opened>Side Menu</mat-sidenav>
<mat-sidenav-content>Main Content</mat-sidenav-content>
</mat-sidenav-container>

<mat-tab-group>
<mat-tab label="Home">Home Content</mat-tab>
<mat-tab label="About">About Content</mat-tab>
</mat-tab-group>

2.4 Dialogs

Open modal dialogs easily:


import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';

constructor(private dialog: MatDialog) {}

openDialog() {
this.dialog.open(DialogComponent, {
width: '300px',
data: { name: 'Chinmaya' }
});
}

2.5 Tables

Material tables support sorting, pagination, and filtering:


<table mat-table [dataSource]="dataSource">

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

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

2.6 Snackbar

Display temporary messages:


import { MatSnackBar } from '@angular/material/snack-bar';

constructor(private snackBar: MatSnackBar) {}

showMessage() {
this.snackBar.open('Data saved successfully!', 'Close', {
duration: 3000
});
}

3. Themes & Custom Theming

Angular Material supports theming for a consistent look:


@use '@angular/material' as mat;

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

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

@include mat.all-component-themes($my-theme);
  1. Choose prebuilt themes (indigo-pink, deeppurple-amber, pink-bluegrey)
  2. Create custom themes using SCSS for branding

Summary

  1. Install Angular Material using ng add @angular/material.
  2. Material provides ready-made UI components: Buttons, Forms, Navigation, Dialogs, Tables, Snackbar.
  3. Use mat-toolbar, mat-sidenav, mat-tab-group for navigation and layout.
  4. Snackbar and dialogs improve user interaction.
  5. Material supports prebuilt and custom themes for consistent app styling.