Angular 19 | Chapter 15 | Angular Material UI

 

What is Angular Material in Angular ?

Angular Material is a UI component library that provides a set of pre-built, reusable components that follow Google's Material Design principles. It helps developers build beautiful, consistent, and responsive user interfaces (UIs) without having to start from scratch.

 

🎨 Key Features of Angular Material

1. Pre-built UI Components
   Angular Material provides over 30 pre-built components like:
• Buttons
• Forms
• Navigation (e.g., toolbars, sidenavs)
• Dialogs, menus, and tooltips
• Cards, tables, and lists
• Datepickers, sliders, and checkboxes
2. Material Design
   The components follow Material Design guidelines, offering a consistent visual language and ensuring a cohesive user experience across platforms.
3. Responsive
   Components are responsive by default, adapting smoothly to different screen sizes and devices.
4. Customizable
   You can customize the look and feel of Angular Material components by overriding styles or using Angular's theming system.
5. Accessibility
   Angular Material prioritizes accessibility by providing components that are keyboard-navigable and screen reader-friendly.
6. Integration with Angular
   Angular Material is designed to integrate seamlessly with Angular, leveraging Angular's features like reactive forms, animations, and change detection.

 

🔧 Setting Up Angular Material

To start using Angular Material in your project, follow these steps:

1. Install Angular Material, CDK, and Animations

ng add @angular/material

• This command installs Angular Material and automatically configures some dependencies, including Angular CDK (Component Dev Kit) and Angular Animations.

1. Choose a Theme

You’ll be prompted to choose a theme (e.g., indigo-pink, deep-purple-amber), or you can create your own custom theme.

1. Import Angular Material Modules

In app.module.ts, import the Material modules for the components you want to use. For example, if you want to use buttons and input fields:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    MatButtonModule,
    MatInputModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

📚 Example: Using Material Components

1. Material Button and Input

<mat-form-field>
  <input matInput placeholder="Enter your name" [(ngModel)]="name">
</mat-form-field>

<button mat-raised-button color="primary" (click)="submit()">Submit</button>

• mat-form-field: Wraps form inputs for consistent styling.
• matInput: Applies Material Design styles to <input> elements.
• mat-raised-button: Creates a raised button with Material Design styling.

 

2. Material Dialog (Popup)

1. Import Material Dialog Module:

import { MatDialogModule } from '@angular/material/dialog';

1. Open a Dialog:

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

@Component({
  selector: 'app-my-component',
  template: '<button mat-raised-button (click)="openDialog()">Open Dialog</button>'
})
export class MyComponent {

constructor(private dialog: MatDialog) {}

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

1. Dialog Component:

@Component({
  selector: 'app-my-dialog',
  template: `<h1>Dialog Content</h1>`
})
export class MyDialogComponent {}

 

🎨 Theming and Customization

Angular Material allows easy theming. You can customize the default colors, typography, and density.

Example: Creating a Custom Theme

1. Define a theme in styles.scss:

@import '~@angular/material/theming';

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

$custom-theme: mat-light-theme($custom-primary, $custom-accent);

@include angular-material-theme($custom-theme);

1. Add global styles (like button, input styles) by customizing Angular Material's default style.

 

🧠 Summary

Feature	Description
UI Components	Pre-built Material Design components
Theming	Built-in theming system to customize colors
Responsive	Automatically adapts to screen size
Accessibility	Focus on accessible and user-friendly components
Integration	Tight integration with Angular’s architecture