@angular/material

Official Material Design component library for Angular — 30+ accessible, themeable UI components built for Angular's ecosystem.

@angular/material

Angular

Official Material Design component library for Angular — 30+ accessible, themeable UI components built for Angular's ecosystem.

npm GitHub Docs

Fit

Bundle (gzip)

212 B

253 B raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Building consistent, accessible UI components from scratch in Angular — buttons, dialogs, date pickers, data tables — requires significant effort and ARIA expertise. Third-party libraries often lag behind Angular's release cycle.

What It Does

Angular Material provides production-ready components that integrate with Angular's CDK, Forms, and Router. Each component supports theming via CSS custom properties, conforms to WAI-ARIA, and ships with built-in animations. The schematic tooling generates components pre-configured with the correct module imports.

Installation

bash

ng add @angular/material

Usage Example

typescript

// app.module.ts
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';

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

html

<!-- component.html -->
<button mat-raised-button color="primary" (click)="openDialog()">
  Open Dialog
</button>

Related packages

@angular/cdkAngular

Angular Component Dev Kit — a set of behavior primitives for building accessible, high-quality UI components without prescribing any visual style.

@ng-bootstrap/ng-bootstrapAngular

Angular widgets built from scratch using Bootstrap CSS — no jQuery, no Popper.js, just pure Angular components.

ng-zorro-antdAngular

Enterprise-grade UI component library for Angular based on Ant Design — 60+ production-ready components with a polished design system.

@ngneat/until-destroyAngular

Automatic RxJS subscription cleanup for Angular components — no more manual unsubscribe logic in ngOnDestroy.

@ngrx/storeAngular

Reactive state management for Angular apps built on RxJS — a predictable, unidirectional data flow inspired by Redux.