@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.2.0 "polymer-prism" (2024-02-14)

cdk

| Commit | Type | Description | | -- | -- | -- | | 55eeee3516 | fix | listbox: unable to tab in if active option is removed (#28583) | | 2f7aaaa220 | fix | table: error if outlets are assigned too early (#28551) |

material

| Commit | Type | Description | | -- | -- | -- | | 99a4e2a10f | fix | button-toggle: Add remaining typography tokens needed for M3 (#28578) | | e05795dde0 | fix | button: calculate icon button padding based on tokens | | a496855f30 | fix | button: generate separate tokens for mini fab | | cbeeb3ae17 | fix | checkbox: use token for disabled label color | | 0a1c8eedb4 | fix | chips: Tokenize chip outline and disabled opacity (#28488) | | 58764afec2 | fix | chips: Tokenize the hover & focus overlays (#28497) | | 32f86e48e1 | fix | chips: Tokenize the selected state (#28498) | | 1dcc195853 | fix | core: ensure that option inherits container background | | 873c8e97dc | fix | datepicker: fix M3 styles (#28556) | | 8ac58ff328 | fix | datepicker: fix touchui shadow and border-radius (#28577) | | 92ab097987 | fix | datepicker: use direction-agnostic text-align | | 0edc47673f | fix | form-field: container height in lower densities (#28546) | | b1f281cab5 | fix | list: ensure leading icon scales with token | | 306c2424f7 | fix | list: indexOf usage incorreect for active focus reset (#28531) | | 75955eb9b4 | fix | list: match leading icon size in M3 to spec | | b8327cd92c | fix | list: tokenize active-indicator (#28586) | | ba05521005 | fix | list: tokenize space around leading icon | | 0d88889452 | fix | list: use direction-agnostic text-align | | 46fe83f21f | fix | list: use transparent background for M3 (#28504) | | 044c9ba648 | fix | menu: prevent icon from collapsing when text is long (#28541) | | 47c55925c0 | fix | menu: Update token values and styles for M3 (#28470) | | a656164255 | fix | progress-bar: incorrect alignment if direction is set on element | | f6d3f1bc21 | fix | schematics: import async animations and remove deprecated function usages (#28424) | | fbf2ef3fcb | fix | select: fix m3 arrow alignment (#28545) | | fca43aa49b | fix | select: styles for m3 (#28492) | | d799c044a7 | fix | slide-toggle: fix m3 slide-toggle handle (#28503) | | 130afedf1c | fix | slide-toggle: m3 slide-toggle track (#28539) | | 63c6b841b4 | fix | slide-toggle: m3 track outline and handle opacity (#28565) | | 2455a42d3c | fix | stepper: Update token values for M3 and add color variant support (#28430) | | f9621a7c8c | fix | tabs: prevent page scroll on space press (#28532) |

material-experimental

| Commit | Type | Description | | -- | -- | -- | | d16e8ac5de | feat | theming: add M3 tokens for pseudo checkbox (#28407) | | 4742a175ab | fix | theming: Add more tests for M3 theme tokens (#28561) | | 1f1dac5e57 | fix | theming: Add support for color variants in badge, button-toggle, button, pseudo-checkbox, and chips (#28457) | | 08c97ab648 | fix | theming: Add support for color variants in option, checkbox, and fab (#28412) | | 715877a13d | fix | theming: Add support for color variants in progress-spiner, progress-bar, list, form-field, and datepicker (#28451) | | 29a1e5d8a1 | fix | theming: Add support for color variants in slide-toggle, select, and radio (#28445) | | e45e210055 | fix | theming: Add support for color variants in tabs and slider (#28417) | | 9ab104b804 | fix | theming: align dialog with M3 | | 957bc487bf | fix | theming: align fab with M3 spec | | ba3680ed48 | fix | theming: align M3 icon buttons with spec | | 601a745fc8 | fix | theming: cap icon button size | | 339905c5af | fix | theming: disabled radio button incorrect label color (#28415) | | b6e0b20e1f | fix | theming: Fix chip trailing icon opacity in M3 (#28530) | | fdd16e6675 | fix | theming: fix filled text field | | 06c81e38c7 | fix | theming: fix paginator in M3 | | 59b93b44ab | fix | theming: Fix token causing test failure on CI (#28569) | | 1e48cd431f | fix | theming: fix up M3 checkbox | | 056e2221ec | fix | theming: implement M3 badge (#28460) | | 93f3421538 | fix | theming: incorrect track color for alternate progress bar palettes (#28484) | | 935eda0872 | fix | theming: incorrect validation for density scale | | 8fab89229d | fix | theming: Make color API back-cmpat styles available (#28526) | | f1deb30a17 | fix | theming: Make M3 work with typography-hierarchy (#28540) | | 5f1a7ea1ee | fix | theming: resolve M3 issues in mat-option (#28482) | | dabb96765a | fix | theming: set up core theme and app tokens (#28431) | | d26a51e3a5 | fix | theming: set up internal form field in M3 (#28414) | | 42f2cc9ad8 | fix | theming: set up padding tokens | | 0da585f730 | fix | theming: Update color palettes (#28472) |

<!-- CHANGELOG SPLIT MARKER -->

<a name="16.2.14"></a>