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

Changelog

Source

13.0.0 "fir-valise" (2021-11-03)

Breaking Changes

cdk

If your application imports styles from ~@angular/cdk, the @import/@use statements need to be updated to omit the tilde. The tilde syntax is deprecated within the webpack sass-loader and does not work with APF v13.

// before
@use '~@angular/cdk' as cdk;

// after
@use '@angular/cdk' as cdk;

The Angular CLI will automatically migrate your application with: ng update @angular/cdk.

Additional breaking changes:

CKD_COPY_TO_CLIPBOARD_CONFIG has been removed. Use CDK_COPY_TO_CLIPBOARD_CONFIG instead.
ConnectedPositionStrategy has been removed. Use FlexibleConnectedPositionStrategy instead.
OverlayPositionBuilder.connectedTo has been removed. Use OverlayPositionBuilder.flexibleConnectedTo instead.

material

If your application imports styles from ~@angular/material, the @import/@use statements need to be updated to omit the tilde. The tilde syntax is deprecated within the webpack sass-loader and does not work with APF v13.

// before
@use '~@angular/material' as mat;

// after
@use '@angular/material' as mat;

The Angular CLI will automatically migrate your application with: ng update @angular/material.

Additionally, the following breaking changes have been made:

The minimum version of Sass has been bumped to 1.34.0. Version 1.38.0 is recommended.
CanColorCtor is no longer necessary and has been removed.
CanDisableRippleCtor is no longer necessary and has been removed.
CanDisableCtor is no longer necessary and has been removed.
CanUpdateErrorStateCtor is no longer necessary and has been removed.
HasInitializedCtor is no longer necessary and has been removed.
HasTabIndexCtor is no longer necessary and has been removed.
The _document and _dialog parameters have been removed from the MatDatepicker and MatDateRangePicker constructors.
MatFormFieldHarness.getHarnessLoaderForPrefix has been removed. Use MatFormFieldHarness.getPrefixText instead.
MatFormFieldHarness.getHarnessLoaderForSuffix has been removed. Use MatFormFieldHarness.getSuffixText instead.
The _labelOptions parameter of the MatFormField constructor has been removed.
MatFormField.underlineRef has been removed.
matTextareaAutosize has been removed. Use cdkTextareaAutosize from the @angular/cdk/text-field module instead.
MatTabHarness.getHarnessLoaderForContent has been removed. Use MatTabHarness.getRootHarnessLoader instead.

youtube-player

- YouTubePlayer.createEventsBoundInZone has been removed.

material-date-fns-adapter

| Commit | Type | Description | | -- | -- | -- | | e8dd070bbd | feat | add date adapter for date-fns (#23262) | | 2a358120f4 | fix | locale not passed into parse function (#23653) |

material-experimental

youtube-player

| Commit | Type | Description | | -- | -- | -- | | 7539cf2837 | refactor | remove deprecated APIs for v13 (#23520) |

google-maps

material

cdk

multiple

ng-add

| Commit | Type | Description | | -- | -- | -- | | 5c22a1dbf0 | fix | syntax error due to ES2020 being used for ng-add with NodeJS 12.x (#23744) |

Special Thanks

Amy Sorto, Andrew Seguin, Charles, Jeremy Elbourn, Joey Perrott, Kristiyan Kostadinov, Md. Enzam Hossain, Michael Prentice, Miles Malerba, Paul Gschwendtner, Ruslan Lekhman, Suguru Inatomi, Wagner Maciel, Zach Arend, bjarkler and mmalerba

Readme

Source