
Security News
Crates.io Implements Trusted Publishing Support
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
@angular/material
Advanced tools
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.
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 {}
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 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 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.
The sources for this package are in the main Angular Material repo. Please file issues and pull requests against that repo.
License: MIT
13.0.0 "fir-valise" (2021-11-03)
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.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:
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._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._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.YouTubePlayer.createEventsBoundInZone
has been removed.| Commit | Type | Description | | -- | -- | -- | | e8dd070bbd | feat | add date adapter for date-fns (#23262) | | 2a358120f4 | fix | locale not passed into parse function (#23653) |
| Commit | Type | Description | | -- | -- | -- | | 2789d8eb5f | feat | mdc-card: add DI token for configuring appearance (#23302) | | a4ae3b88c0 | feat | mdc-slide-toggle: switch to non-deprecated styles (#23143) | | e7a77edf1e | fix | mdc-tabs: update theming api (#23855) |
| Commit | Type | Description | | -- | -- | -- | | 7539cf2837 | refactor | remove deprecated APIs for v13 (#23520) |
| Commit | Type | Description | | -- | -- | -- | | 7c16258cfb | feat | switch to non-deprecated typings (#23350) |
| Commit | Type | Description | | -- | -- | -- | | 3dc5af4bfd | feat | dialog: add support for content sections in harness (#23357) | | e4b54aa2b7 | feat | progress-bar: add default options injection token (#23363) | | 6c724c18a7 | fix | chips: show required asterisk when using required validator (#23379) | | 728cf1c8eb | fix | dialog: improve screen reader support when opened (#23085) | | 881edec3e6 | fix | icon: make icon-registry compatible with Trusted Types (#23140) | | 1568b35972 | fix | input: show required asterisk when using required validator (#23362) | | 64ba72f1fd | fix | select: show required asterisk when using required validator (#23500) | | 01734b35af | fix | sidenav: restore focus with correct origin when closing via the backdrop (#23492) | | 7bc9bfb9dc | refactor | core: remove deprecated APIs for v13 (#23529) | | 40f0674e39 | refactor | core: update minimum required sass version and clean up workarounds (#23414) | | f8dc1770d1 | refactor | datepicker: remove deprecated APIs for v13 (#23574) | | 700c0601c0 | refactor | form-field: remove deprecated APIs for version 13 (#23389) | | 760b4564fa | refactor | input: remove deprecated autosize directive (#23408) | | 3ad08940f1 | refactor | tabs: remove deprecated APIs for v13 (#23426) |
| Commit | Type | Description |
| -- | -- | -- |
| 51796e1601 | feat | overlay: Extend cdkConnectedOverlayOrigin
to support more types. (#23253) |
| 04b5a08190 | feat | schematics: add migration for removed symbols (#23530) |
| b25283cda9 | fix | a11y: error on firefox (#23395) |
| 219e1f558a | fix | drag-drop: add conditional to scroll update (#23337) |
| 6e1f522d6a | fix | drag-drop: allow using cdkDragRootElement w/ comment tag (#23596) |
| d70faa0018 | fix | drag-drop: sorted event emitted multiple times for single-item list (#23589) |
| f2ff9e3142 | fix | schematics: drop tilde imports when updating to v13 (#23732) |
| 692ebafe7b | fix | testing: fake touch event does not set proper touch identifier |
| 5833597a7a | refactor | clipboard: clean up deprecated APIs for v13 (#23401) |
| 8d39384770 | refactor | overlay: remove deprecated connected position strategy |
| Commit | Type | Description | | -- | -- | -- | | 769996ed3f | feat | add options to autoFocus field for dialogs (#22780) | | db18b4093f | feat | add support for TypeScript 4.4 (#23646) |
| Commit | Type | Description | | -- | -- | -- | | 5c22a1dbf0 | fix | syntax error due to ES2020 being used for ng-add with NodeJS 12.x (#23744) |
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
<!-- CHANGELOG SPLIT MARKER --><a name="13.0.0-rc.3"></a>
FAQs
Angular Material
The npm package @angular/material receives a total of 1,410,307 weekly downloads. As such, @angular/material popularity was classified as popular.
We found that @angular/material demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
Research
/Security News
Undocumented protestware found in 28 npm packages disrupts UI for Russian-language users visiting Russian and Belarusian domains.
Research
/Security News
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.