Angular Material UI Setup and Components

What is Angular Material UI?

  1. Angular Material is a UI framework
  2. It provides ready-made UI components
  3. Helps create better design in less time


Angular Material vs Tailwind CSS

  1. Tailwind CSS → Utility classes (class-based styling)
  2. Angular Material → Pre-built components
  3. Concepts are completely different


Steps to Install Angular Material

Command to install:

ng add @angular/material


During Installation

You will be asked:

  1. Theme selection (e.g. Azure Blue)
  2. Press Enter to continue

Setup completes automatically.


What Changes After Installation?

Angular Material automatically:

  1. Adds dependency in package.json
  2. Updates angular.json (theme added)
  3. Adds fonts & styles in index.html
  4. Creates material-theme.scss

No manual changes needed.


Restart the Angular Server

After installation:

ng serve

Restart is recommended to avoid font/style issues.


Using Angular Material Components

Always refer to:

  1. Official Angular Material documentation
  2. Components section

You don’t need to remember everything.


Using Material Button

Step 1: Import MatButtonModule

app.module.ts

import { MatButtonModule } from '@angular/material/button';

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


Step 2: Use Button in HTML

<button mat-button>Basic Button</button>
<button mat-raised-button>Raised Button</button>
<button mat-flat-button>Flat Button</button>

mat-button automatically adds styles.


Using Material Badge

Step 1: Import MatBadgeModule

import { MatBadgeModule } from '@angular/material/badge';

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


Step 2: Use Badge in HTML


<button mat-button matBadge="5" matBadgePosition="after">
Notifications
</button>

Badge position can be:

  1. before
  2. after


Badge with Text

<div matBadge="New" style="width:150px">
Messages
</div>

You can add your own styles if needed.


Using Material Card

Step 1: Import MatCardModule

import { MatCardModule } from '@angular/material/card';

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


Step 2: Use Card in HTML

<div style="width:500px; margin:50px">
<mat-card>
<mat-card-title>User Info</mat-card-title>
<mat-card-content>
This is a material card.
</mat-card-content>
<mat-card-actions>
<button mat-button>Like</button>
</mat-card-actions>
</mat-card>
</div>


Key Points to Remember

  1. Angular Material uses components, not utility classes
  2. Each component needs its own module import
  3. You can still apply custom CSS or inline styles
  4. Official docs are best for reference