@angular/material

What is @angular/material?

The @angular/material package is a UI component library for Angular applications that implements Google's Material Design. It provides a wide range of reusable UI components that are designed to be efficient, accessible, and visually appealing. These components help developers build cohesive, attractive, and functional web applications with less effort.

What are @angular/material's main functionalities?

Form Controls

Form controls are essential for collecting input from the user. @angular/material provides various form controls like input fields, checkboxes, radio buttons, and select dropdowns. The code sample demonstrates how to import and use the MatInputModule for text inputs.

import {MatInputModule} from '@angular/material/input';

@NgModule({
  imports: [MatInputModule]
})
export class MyModule {}

Navigation

Navigation components help users move through the application. This includes menus, side navigation, and toolbars. The code sample shows how to import the MatToolbarModule to use a Material Design toolbar in your application.

import {MatToolbarModule} from '@angular/material/toolbar';

@NgModule({
  imports: [MatToolbarModule]
})
export class MyModule {}

Layout

Layout components assist in structuring the view of an application. @angular/material offers grid lists, cards, and tabs to help organize content. The code sample illustrates the use of MatGridListModule for creating grid layouts.

import {MatGridListModule} from '@angular/material/grid-list';

@NgModule({
  imports: [MatGridListModule]
})
export class MyModule {}

Buttons & Indicators

Buttons and indicators are used for actions and status feedback. This category includes buttons, progress bars, and spinner indicators. The code sample demonstrates importing MatButtonModule to use Material Design buttons.

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

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

Other packages similar to @angular/material

ngx-bootstrap

ngx-bootstrap provides Bootstrap components powered by Angular. It's similar to @angular/material in providing a set of reusable UI components but is based on Bootstrap's design system rather than Material Design.

primeng

PrimeNG is a collection of rich UI components for Angular. It offers a wide range of widgets and is comparable to @angular/material in terms of providing components for form controls, tables, overlays, and more. PrimeNG is known for its extensive component library beyond what @angular/material offers.

ng-zorro-antd

NG-ZORRO is an Angular UI library based on Ant Design. Similar to @angular/material, it provides a comprehensive suite of UI components that are designed to be modular, lightweight, and easy to use. It differs in its design philosophy, following Ant Design principles instead of Material Design.

README

Angular Material

The sources for this package are in the main Angular Material repo. Please file issues and pull requests against that repo.

License: MIT

Changelog

17.0.0 "deferred-diamond" (2023-11-08)

Breaking Changes

material

• There are new styles emitted by mat.<component>-theme that are not emitted by any of: mat.<component>-color, mat.<component>-typography, or mat.<component>-density. If you rely on the partial mixins only and don't call mat.<component>-theme, you can add mat.<component>-base to get the missing styles. Alternatively you can call mat.all-component-bases to get just the base styles for all components.
• There are new styles emitted by mat.bottom-sheet-theme that are not emitted by any of: mat.bottom-sheet-color, mat.bottom-sheet-typography, mat.bottom-sheet-density. If you rely on the partial mixins only and don't call mat.bottom-sheet-theme, you can add mat.bottom-sheet-base to get the missing styles.
• There are new styles emitted by mat.button-toggle-theme that are not emitted by any of: mat.button-toggle-color, mat.button-toggle-typography, mat.button-toggle-density. If you rely on the partial mixins only and don't call mat.button-toggle-theme, you can add mat.button-toggle-base to get the missing styles.
• There are new styles emitted by mat.fab-theme that are not emitted by any of: mat.fab-color, mat.fab-typography, mat.fab-density. If you rely on the partial mixins only and don't call mat.fab-theme, you can add mat.fab-base to get the missing styles.
• There are new styles emitted by mat.card-theme that are not emitted by any of: mat.card-color, mat.card-typography, mat.card-density. If you rely on the partial mixins only and don't call mat.card-theme, you can add mat.card-base to get the missing styles.
• There are new styles emitted by mat.checkbox-theme that are not emitted by any of: mat.checkbox-color, mat.checkbox-typography, mat.checkbox-density. If you rely on the partial mixins only and don't call mat.checkbox-theme, you can add mat.checkbox-base to get the missing styles.
• There are new styles emitted by mat.chips-theme that are not emitted by any of: mat.chips-color, mat.chips-typography, mat.chips-density. If you rely on the partial mixins only and don't call mat.chips-theme, you can add mat.chips-base to get the missing styles.
• NativeDateAdapter no longer takes Platform in its constructor. It also now uses the inject function, and therefore cannot be instantiated directly (must go through Angular's DI system instead).
• There are new styles emitted by mat.dialog-theme that are not emitted by any of: mat.dialog-color, mat.dialog-typography, mat.dialog-density. If you rely on the partial mixins only and don't call mat.dialog-theme, you can add mat.dialog-base to get the missing styles.
• There are new styles emitted by mat.list-theme that are not emitted by any of: mat.list-color, mat.list-typography, mat.list-density. If you rely on the partial mixins only and don't call mat.list-theme, you can add mat.list-base to get the missing styles.
• There are new styles emitted by mat.menu-theme that are not emitted by any of: mat.menu-color, mat.menu-typography, mat.menu-density. If you rely on the partial mixins only and don't call mat.menu-theme, you can add mat.menu-base to get the missing styles.
• There are new styles emitted by mat.progress-bar-theme that are not emitted by any of: mat.progress-bar-color, mat.progress-bar-typography, mat.progress-bar-density. If you rely on the partial mixins only and don't call mat.progress-bar-theme, you can add mat.progress-bar-base to get the missing styles.
• There are new styles emitted by mat.progress-spinner-theme that are not emitted by any of: mat.progress-spinner-color, mat.progress-spinner-typography, mat.progress-spinner-density. If you rely on the partial mixins only and don't call mat.progress-spinner-theme, you can add mat.progress-spinner-base to get the missing styles.
• There are new styles emitted by mat.radio-theme that are not emitted by any of: mat.radio-color, mat.radio-typography, mat.radio-density. If you rely on the partial mixins only and don't call mat.radio-theme, you can add mat.radio-base to get the missing styles.
• There are new styles emitted by mat.sidenav-theme that are not emitted by any of: mat.sidenav-color, mat.sidenav-typography, mat.sidenav-density. If you rely on the partial mixins only and don't call mat.sidenav-theme, you can add mat.sidenav-base to get the missing styles.
• There are new styles emitted by mat.slide-toggle-theme that are not emitted by any of: mat.slide-toggle-color, mat.slide-toggle-typography, mat.slide-toggle-density. If you rely on the partial mixins only and don't call mat.slide-toggle-theme, you can add mat.slide-toggle-base to get the missing styles.
• There are new styles emitted by mat.slider-theme that are not emitted by any of: mat.slider-color, mat.slider-typography, mat.slider-density. If you rely on the partial mixins only and don't call mat.slider-theme, you can add mat.slider-base to get the missing styles.
• There are new styles emitted by mat.snack-bar-theme that are not emitted by any of: mat.snack-bar-color, mat.snack-bar-typography, mat.snack-bar-density. If you rely on the partial mixins only and don't call mat.snack-bar-theme, you can add mat.snack-bar-base to get the missing styles.
• There are new styles emitted by mat.table-theme that are not emitted by any of: mat.table-color, mat.table-typography, mat.table-density. If you rely on the partial mixins only and don't call mat.table-theme, you can add mat.table-base to get the missing styles.
• There are new styles emitted by mat.tabs-theme that are not emitted by any of: mat.tabs-color, mat.tabs-typography, mat.tabs-density. If you rely on the partial mixins only and don't call mat.tabs-theme, you can add mat.tabs-base to get the missing styles.
• There are new styles emitted by mat.tooltip-theme that are not emitted by any of: mat.tooltip-color, mat.tooltip-typography, mat.tooltip-density. If you rely on the partial mixins only and don't call mat.tooltip-theme, you can add mat.tooltip-base to get the missing styles.

multiple

• @import of Angular Material and Angular CDK Sass is no longer supported. Please use @use instead.
• • Themes are now more strictly validated when calling Angular Material theme mixins. For example, calling mat.button-typography with a theme has typography: null is now an error.
  • The mat.legacy-typography-hierarchy mixin has been removed in favor of mat.typography-hierarchy

material-experimental

| Commit | Type | Description | | -- | -- | -- | | 289ddd348 | feat | theming: add M3 progress bar support (#27880) | | 75029c273 | feat | theming: add M3 progress-spinner support (#27868) | | 2f958aced | feat | theming: add M3 radio support (#27867) | | fbc7bdda9 | feat | theming: add M3 slider support (#27826) | | 6b57edb1b | feat | theming: add M3 snackbar support (#27824) | | 545db61b4 | feat | theming: add M3 toolbar support (#27812) | | 1930b1dac | feat | theming: add M3 tooltip support (#27810) | | 60aa52c88 | feat | theming: Support defining M3 theme objects |

material

| Commit | Type | Description | | -- | -- | -- | | 06559a012 | feat | dialog: switch to standalone (#27860) | | 425bad872 | feat | snack-bar: convert to standalone (#27926) | | 7be5dde24 | feat | theming: Add 'base' theming dimension to all components (#27924) | | 9906aa344 | feat | theming: Add APIs to check what information theme has | | 1a85dd299 | feat | theming: Add APIs to get color info from theme | | e608f5fa3 | feat | theming: Add APIs to get density info from theme | | f52e97958 | feat | theming: Add APIs to get typography info from theme | | 685b585f7 | feat | theming: add support for M2 themes to theme inspection API | | 82844b3d5 | feat | theming: Open up new APIs to access theme values (#27865) | | c6bc738cd | fix | bottom-sheet: move unthemable tokens to theme mixin (#27882) | | bcbdf910b | fix | button-toggle: move unthemable tokens to theme mixin (#27883) | | 74d1be62e | fix | button: align prefixes with MDC (#27936) | | 146bc2385 | fix | button: Emit fab tokens under mixin root selector (#27806) | | 1de6a3aa3 | fix | button: fix color tokens of raised buttons (#27904) | | 68096ec9d | fix | button: Move fab unthemable tokens to theme mixin (#27580) | | 408c0b492 | fix | card: Apply tokens at mixin root (#27557) | | 06460d177 | fix | card: Move unthemable tokens to theme mixin (#27579) | | 03a773a02 | fix | checkbox: Move unthemable tokens to theme mixin (#27556) | | f823c2a52 | fix | chips: move unthemable tokens to theme mixin (#27884) | | fcaa95e69 | fix | core: prevent updates to v17 if project uses legacy components (#28024) | | b423c0e0b | fix | datepicker: deprecate constructor injection in NativeDateAdapter (#26144) | | cac7a41f7 | fix | dialog: css structure change (#27510) | | 6f0a4655e | fix | dialog: Emit tokens under mixin root selector (#27830) | | c4a62a884 | fix | dialog: MatDialog: change member _dialog (cdk) from private to protected (#28019) (#28020) | | dfba0edfb | fix | dialog: Move unthemable tokens to theme mixin (#27606) | | c6fa905dd | fix | divider: move unthemable tokens to theme mixin (#27881) | | afceed2a5 | fix | expansion: move unthemable tokens to theme mixin (#27885) | | cf456a2d4 | fix | form-field: don't toggle hover state over subscript (#27683) | | 0ac19114c | fix | form-field: move unthemable tokens to theme mixin (#27887) | | c7db4960e | fix | list: Emit tokens under mixin root selector (#27711) | | 7c16cc8b6 | fix | list: Move unthemable tokens to theme mixin (#27607) | | c77ffa0cc | fix | menu: move unthemable tokens to theme mixin (#27888) | | 047404067 | fix | progress-bar: Move unthemable tokens to theme mixin (#27563) | | f8252d816 | fix | progress-spinner: Emit tokens under mixin root selector (#27594) | | 593fc79ec | fix | progress-spinner: Move unthemable tokens to theme mixin (#27567) | | dbd31dec8 | fix | radio: Apply tokens at mixin root (#27864) | | 943b5dabf | fix | radio: move unthemable tokens to theme mixin (#27809) | | 7a42a5de9 | fix | schematics: account for browser-esbuild builder (#28025) | | 041a71b87 | fix | schematics: Create a schematic to add the base theme dimension (#27964) | | 9fe4fe1f5 | fix | schematics: don't add the preconnect for fonts (#28026) | | 7cd71b697 | fix | sidenav: move unthemable tokens to theme mixin (#27889) | | eed75ddfc | fix | slide-toggle: move unthemable tokens to theme mixin (#27905) | | b13c6aa19 | fix | slider: change slider to use MDC's token API (#27375) | | 47876311b | fix | slider: Emit tokens under mixin root selector (#27597) | | c572dc4bf | fix | slider: Move unthemable tokens to theme mixin (#27584) | | 6c724c713 | fix | snack-bar: Emit tokens under mixin root selector (#27667) | | 65c97170d | fix | snack-bar: Move unthemable tokens to theme mixin (#27596) | | af1840209 | fix | table: move unthemable tokens to theme mixin (#27890) | | 59351724d | fix | tabs: move unthemable tokens to theme mixin (#27891) | | 999029aa5 | fix | theming: Fix subtle bug in current-selector-or-root (#27898) | | 6cc6cf21f | fix | tooltip: Emit tokens under mixin root selector (#27585) | | ccd2d7fa7 | fix | tooltip: Move unthemable tokens to theme mixin (#27569) | | f7e3ae3bd | fix | remove legacy components (#27622) |

cdk

| Commit | Type | Description | | -- | -- | -- | | b3e4d576b | feat | overlay: add disposeOnNavigation (#27672) | | 2409e7071 | fix | schematics: account for single string in styles and new styleUrl (#27798) | | c5ab88020 | fix | schematics: support both application and browser builders (#27875) |

multiple

| Commit | Type | Description | | -- | -- | -- | | 86e9e524c | fix | remove .import.scss and -legacy-index.scss files (#27571) | | 55f9618b6 | fix | remove unnecessary base classes (#27632) | | a3f9ca14b | perf | switch to built-in control flow (#27987) | | 90465a188 | refactor | convert components to theme inspection API (round 4) (#27740) |

<!-- CHANGELOG SPLIT MARKER -->

<a name="16.2.12"></a>