Chapter 15: Angular Material UI (Standalone Components)

1. Installing Angular Material

Use the Angular CLI to add Angular Material, Angular CDK, and Angular Animations:

ng add @angular/material
  

This command will guide you through setup options, including adding themes and configuring animations.

2. Importing Angular Material Modules in Standalone Components

With standalone components, import Angular Material modules directly in the component’s imports array:

import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';

@Component({
  standalone: true,
  selector: 'app-material-demo',
  imports: [MatButtonModule, MatToolbarModule],
  template: `
    
      Angular Material Toolbar
    
    Click Me
  `
})
export class MaterialDemoComponent {}
  

3. Common Angular Material Components

• MatToolbar: Header bars for navigation or branding.
• MatButton: Various styled buttons with ripple effects.
• MatInput: Material styled input fields.
• MatDialog: Modal dialogs for alerts, forms, or confirmations.
• MatTable: Data tables with sorting and pagination.
• MatSnackBar: Toast notifications.

4. Example: Using MatDialog in a Standalone Component

This example shows how to open a simple dialog:

import { Component } from '@angular/core';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';

@Component({
  standalone: true,
  selector: 'app-dialog-demo',
  imports: [MatDialogModule],
  template: `
    Open Dialog
  `
})
export class DialogDemoComponent {
  constructor(private dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(DialogContent);
  }
}

@Component({
  standalone: true,
  selector: 'app-dialog-content',
  template: `

Hello from Dialog

This is a simple dialog example. Close ` }) export class DialogContent {}

5. Theming and Custom Styles

Angular Material uses predefined themes, but you can customize colors and typography by modifying the global styles or creating your own theme file. You can also use Angular Material’s CSS variables for runtime theming.

6. Summary

• Angular Material offers a rich set of UI components following Material Design guidelines.
• Standalone components can import Material modules directly in their imports array.
• Common components include toolbar, buttons, dialogs, tables, and snack bars.
• Theming can be customized globally or dynamically using CSS variables.

Next Chapter Preview