🎨 Material & NgRx

Angular Material UI components, NgRx state management architecture (Store, Actions, Reducers, Effects, Selectors).

Angular Material UI Component Library

Angular Material provides official Google Material Design UI components (Buttons, Cards, Dialogs, Tables, Inputs) optimized for Angular.

terminal Bash

ng add @angular/material

Using Angular Material Components

Import specific Material modules into standalone components.

material-demo.ts TypeScript

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

@Component({
  selector: 'app-mat-demo',
  standalone: true,
  imports: [MatButtonModule, MatCardModule],
  template: `
    <mat-card>
      <mat-card-header><mat-card-title>Material Card</mat-card-title></mat-card-header>
      <mat-card-actions>
        <button mat-raised-button color="primary">Click Me</button>
      </mat-card-actions>
    </mat-card>
  `
})
export class MatDemoComponent {}

What is NgRx?

NgRx is a Redux-inspired global state management library for Angular apps based on RxJS. It enforces single source of truth, immutability, and predictable state transitions.

Core NgRx Architecture

Understanding the unidirectional data flow in NgRx.

Building Block	Role	Description
Store	Single Source of Truth	Centralized immutable database for application state.
Actions	Event Triggers	Dispatched events describing unique state changes.
Reducers	Pure Functions	Takes current state & action to compute next state.
Selectors	Query Functions	Pure functions to slice and memoize store state.
Effects	Side Effect Handlers	Listens for actions to execute async tasks (API calls).

NgRx Action & Reducer Example

Creating actions and reducers using modern `@ngrx/store` APIs.

counter.actions.ts TypeScript

import { createAction, createReducer, on } from '@ngrx/store';

// Actions
export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');

// Reducer
export const initialCount = 0;
export const counterReducer = createReducer(
  initialCount,
  on(increment, (state) => state + 1),
  on(decrement, (state) => state - 1)
);

Angular Pipes