Official components for Angular

The Angular team builds and maintains both common UI components and tools to help you build your own custom components. The team maintains several npm packages.

Quick links

Documentation, demos, and guides | Frequently Asked Questions | Community Google group | Contributing | StackBlitz Template

Getting started

See our Getting Started Guide if you're building your first project with Angular Material.

Contributing

If you'd like to contribute, please follow our contributing guidelines. Please see our help wanted label for a list of issues with good opportunities for contribution. You can also use the good first issue label to find issues if you are just starting to contribute to the project.

About the team

The Angular Components team is part of the Angular team at Google. The team includes both Google employees and community contributors from around the globe.

Our team has two primary goals:

• Build high-quality UI components that developers can drop into existing applications
• Provide tools that help developers build their own custom components with common interaction patterns

What do we mean by "high-quality" components?

• Internationalized and accessible so that all users can use them.
• Straightforward APIs that don't confuse developers.
• Behave as expected across a wide variety of use-cases without bugs.
• Behavior is well-tested with both unit and integration tests.
• Customizable within the bounds of the Material Design specification.
• Performance cost is minimized.
• Code is clean and well-documented to serve as an example for Angular developers.

Browser and screen reader support

The Angular Components team supports the most recent two versions of all major browsers: Chrome (including Android), Firefox, Safari (including iOS), and Edge.

We aim for great user experience with the following screen readers:

• Windows: NVDA and JAWS with FF / Chrome.
• macOS: VoiceOver with Safari / Chrome.
• iOS: VoiceOver with Safari
• Android: Android Accessibility Suite (formerly TalkBack) with Chrome.
• Chrome OS: ChromeVox with Chrome.

20.0.3 "plastic-tube" (2025-06-11)

material

20.0.2 "amesite-armoire" (2025-06-04)

material

20.0.1 "sulfur-sandpaper" (2025-05-28)

material

20.0.0 "calcium-carrot" (2025-05-28)

Breaking Changes

cdk

• • SelectionModel.clear now returns a boolean.
  • SelectionModel.deselect now returns a boolean.
  • SelectionModel.select now returns a boolean.
  • SelectionModel.setSelection now returns a boolean.
  • SelectionModel.toggle now returns a boolean.
• • DIALOG_SCROLL_STRATEGY_PROVIDER has been removed.
  • DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY has been removed.
• • DragDropRegistry is no longer generic.
  • DragDropRegistry.scroll has been removed. Use the scrolled method instead.
• • DomPortalHost has been removed. Use DomPortalOutlet instead.
  • PortalInjector has been removed. Use Injector.create instead.
  • PortalHost has been removed. Use PortalOutlet instead.
  • BasePortalHost has been removed. Use BasePortalOutlet instead.
• • Constructor symbol has been removed.
  • CanStickCtor symbol has been removed.
  • mixinHasStickyInput has been removed. Implement the CanStick interface instead.
• • CanStick has been removed.
  • CDK_TABLE_TEMPLATE has been removed.
  • StickyDirection has been removed.
  • StickyStyler has been removed.

    material

• • ButtonVariant which is returned by MatButtonHarness.getVariant no longer includes the appearance of the button. Use MatButtonHarness.getAppearance instead.
• tabindex values set as [attr.tabindex] set on a Material button might not work as expected. Use tabindex for static values, or [tabindex]/[tabIndex] for dynamic ones.
• • MAT_CHECKBOX_REQUIRED_VALIDATOR has been removed.
  • MAT_CHECKBOX_VALUE_ACCESSOR has been removed.
  • MatCheckboxRequiredValidator has been removed.
  • _MatCheckboxRequiredValidatorModule has been removed.
• • MAT_DIALOG_SCROLL_STRATEGY_PROVIDER has been removed.
  • MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY has been removed.
• • matSelectAnimations.transformPanelWrap has been removed.
• • MAT_SLIDE_TOGGLE_REQUIRED_VALIDATOR has been removed.
  • MAT_SLIDE_TOGGLE_VALUE_ACCESSOR has been removed.
  • MatSlideToggleRequiredValidator has been removed.
  • _MatSlideToggleRequiredValidatorModule has been removed.

    multiple

• • DialogConfig.componentFactoryResolver has been removed.
  • The constructor of DomPortalOutlet has changed.
  • ComponentPortal.componentFactoryResolver has been removed.
  • The constructor signature of ComponentPortal has changed.
  • MatDialogConfig.componentFactoryResolver has been removed.

    cdk-experimental

    | Commit | Type | Description | | -- | -- | -- | | e456c751c | feat | listbox: add cdk-active class (#30932) | | 6ac4c1ae2 | feat | listbox: readonly mode (#30803) | | 96fa9fc55 | feat | popover-edit: Support skipping over annotated rows when the user moves focus up/down. (#30916) | | 025010b64 | feat | tabs: add cdk-active class and update example styles (#30950) | | 9a94bb76a | feat | tabs: support initial tab selection and add unit tests (#31023) | | 1833aa32e | feat | ui-patterns: add expansion behavior and refactor tabs (#30962) | | fc4699744 | feat | ui-patterns: listbox ui pattern (#30495) | | 9caed2a8a | feat | ui-patterns: tabs ui pattern (#30568) | | e0446ecfc | fix | listbox: change shift+nav behavior (#30854) | | 184ceee3a | fix | listbox: ignore spaces during typeahead (#30766) | | 44e9ccbf5 | fix | listbox: initial listbox focus state (#30764) | | a7df65f3e | fix | listbox: use meta as alternative to ctrl (#30852) | | 149fe6129 | fix | popover-edit: use MutationObserver to detect table rows (#30713) | | 16493ecab | fix | scrolling: Fix ExpressionChangedAfterItWasCheckedError (#31076) | | 0e391700c | fix | tabs: handle space and enter events (#30889) | | 2e34b20cb | fix | ui-patterns: add missing event handlers (#30786) | | 4bf3591c7 | fix | ui-patterns: add modifier checks for regexps (#30738) | | ae8f9dd28 | fix | ui-patterns: fix lint and build config (#30877) | | 10890983c | fix | ui-patterns: listbox pointer event handler (#30843) | | 7343657f5 | fix | ui-patterns: small fixes for internal compatibi… (#30625) |

    youtube-player

    | Commit | Type | Description | | -- | -- | -- | | 18ddea330 | fix | use safevalues (#30773) |

    material

    | Commit | Type | Description | | -- | -- | -- | | fb81ab4f2 | feat | button: add support for tonal button (#30638) | | e79f60558 | feat | button: allow appearance to be set dynamically | | 663585a1c | feat | card: support filled variant (#29868) | | 82f0fa6fa | feat | core: handle prefers-reduced-motion automatically (#30796) | | 3daa36030 | feat | core: introduce custom token for controlling animations (#30749) | | 764a1ccd1 | feat | dialog: add closePredicate option | | 097f49d90 | fix | autocomplete: allow overlay backdrop by setting hasBackdrop option (#30631) | | 7d360ac77 | fix | button-toggle: changed after checked error when updating tabindex (#31172) | | 2c7199c02 | fix | button: align harness with new terminology | | 6a5943d8b | fix | button: combine MatButton and MatAnchor (#30492) | | 3aecb3521 | fix | button: tonal touch target token transgression (#30688) | | 77d6b69e7 | fix | checkbox: breaking changes for v20 | | 907815dc5 | fix | checkbox: hardcode token renames (#30752) | | f01ac6e9c | fix | checkbox: resolve change after checked error | | aba4c4437 | fix | chips: chip input not showing placeholder (#30664) | | 33795a1a1 | fix | chips: implement disabledInteractive in chip input (#30665) | | 92bcc67c2 | fix | core: include density tokens in system theme (#30845) | | 5bc01c398 | fix | datepicker: resolve change after checked errors | | 227e83d24 | fix | dialog: breaking changes for v20 | | a5aade2df | fix | form-field: preserve aria-describedby set externally across all form controls (#30699) | | ec538b598 | fix | form-field: use ResizeObserver for label offset calculation (#30702) | | d120f973f | fix | list: resolve changed after checked error | | fd162d201 | fix | schematics: add schematic to rename tokens (#31051) | | db090cac3 | fix | select: breaking changes for v20 | | 688c430fe | fix | select: close panel on detach output event (#30634) | | 12f96e229 | fix | select: resolve change after checked errors | | 404868707 | fix | sidenav: resolve changed after checked error | | c6ad44c68 | fix | slide-toggle: breaking changes for v20 | | d3a8c5b89 | fix | slide-toggle: opacity tokens not being used (#30946) | | 2d86ad441 | fix | slider: fix clobbered token for hover/focus/pressed (#30754) | | 0e985f2c6 | fix | slider: handle null values in slider input (#30621) | | 8b033742b | fix | snack-bar: change politeness level (#30851) | | 40d0ab4fc | fix | snack-bar: rename snackbar token prefix (#30750) | | 0cf6ba107 | fix | stepper: done icon tokens not emitted in M3 (#30996) | | e1f97f920 | fix | stepper: resolve changed after checked errors | | c63b1fe7b | fix | tabs: flicker when animationDuration is set to zero (#30966) | | 922c678c0 | fix | tabs: not emitting token in M3 (#31136) | | 1a800decc | fix | tabs: resolve change after checked errors | | 6c9678e69 | perf | form-field: set notch outline variable only on relevant element (#30955) | | 10a6ea493 | perf | form-field: split DOM accesses into read and write (#31086) |

    cdk

    | Commit | Type | Description | | -- | -- | -- | | 06821d85a | feat | dialog: add closePredicate option | | cf619601a | feat | drag-drop: introduce resetToBoundary (#30436) | | 77c8534ff | fix | accordion: resolve changed after checked error | | 1167d0638 | fix | collections: breaking changes for v20 | | 79e887219 | fix | dialog: breaking changes for v20 | | a2ab84da1 | fix | dialog: provide proper shaped Directionality (#30898) | | b3e516f2d | fix | drag-drop: breaking changes for v20 | | 69eedd75f | fix | drag-drop: incorrect type DragConstrainPosition (#30510) | | f9973ee23 | fix | overlay: use MutationObserver to detach overlay (#30703) | | 11599f808 | fix | portal: remove deprecated symbols (#30584) | | 87501e866 | fix | schematics: support project index file discovery for object-form and default (#30967) | | 8078efc21 | fix | table: breaking changes for v20 | | 0f48b04dd | fix | table: move out unused style scheduler (#30963) | | 6ffe9c748 | fix | table: remove private symbols from public API (#30956) | | 08f4acfef | perf | overlay: add tree-shakeable alternatives for overlay APIs (#30904) |

    material-angular-io

    | Commit | Type | Description | | -- | -- | -- | | 3a1a0b368 | fix | streamline directive and component metadata handling in dgeni (#30661) |

    multiple

    | Commit | Type | Description | | -- | -- | -- | | e1cf2844f | fix | avoid repeating selectors in m3 themes (#30645) | | 3465f9271 | fix | ensure mat-option parents are the offsetParent (#30977) | | cb3b0a87a | fix | ensure re-exported module symbols can be imported (#30667) | | 590971359 | fix | remove backwards-compatibility code (#30747) | | cda5c8e68 | fix | remove remaining references to ComponentFactoryResolver (#30569) | | 5229fe0a0 | fix | rename hardcoded tokens that were renamed (#30807) | | 9bf4be9e2 | fix | rename token prefixes to match components (#30802) | | 32353fb3a | fix | resolve directive host binding issues (#30606) | | 48894ad55 | fix | use DI token for tag name (#30892) |

19.2.14 "sodium-scallop" (2025-05-01)

19.2.11 "dopamine-dumpling" (2025-04-23)

cdk

material

19.2.10 "plastic-monkey" (2025-04-16)

cdk

material

19.2.9 "abellaite-apron" (2025-04-09)

cdk

19.2.8 "sapphire-kraken" (2025-04-02)

cdk

material

cdk-experimental

19.2.7 "bohrium-banana" (2025-03-26)

cdk

material

19.2.6 "tellurium-transponder" (2025-03-21)

cdk

19.2.5 "argon-planet" (2025-03-20)

cdk

material

multiple

19.2.4 "cafetite-cafe" (2025-03-19)

cdk

material

19.2.3 "californium-coconut" (2025-03-12)

cdk

material

multiple

19.2.2 "metal-llama" (2025-03-05)

cdk

material

material-angular-io

multiple

19.2.1 "neptunite-neptune" (2025-02-26)

19.2.0 "pyrite-pacifier" (2025-02-26)

cdk

material

google-maps

youtube-player

cdk-experimental

core

material-angular-io

19.1.5 "bromine-bread" (2025-02-19)

cdk

material

19.1.4 "wattle-lute" (2025-02-12)

cdk

material

multiple

19.1.3 "plastic-wombat" (2025-02-05)

material

19.1.2 "dolomite-domino" (2025-01-29)

cdk

material

google-maps

19.1.1 "lanthanum-labrador" (2025-01-22)

cdk

material

19.1.0 "denim-firefly" (2025-01-16)

cdk

material

cdk-experimental

material-experimental

material-luxon-adapter

a11y

api

button

categories

category-list

ci

compatibility

component-category-list

component-sidenav,component-viewer

component-viewer

csp

doc-viewer

docs

example-viewer

examples

footer

ga

guide

guides

homepage

icons

index.html

main

manifest.json

material-docs-app

module

multiple

nav

navbar

plunker

PWA

readability

scrolling

sidenav

spinner

stack-blitz

stack-blitz-button

stack-blitz-tests

stackblitz

styling

svg

sw

table

tests

toc

tree

19.0.5 "silk-sky" (2025-01-08)

cdk

material

cdk-experimental

19.0.3 "polonium-popsicle" (2024-12-11)

material

19.0.2 "plastic-rhino" (2024-12-04)

cdk

material

youtube-player

19.0.1 "mercury-mailbox" (2024-11-27)

material

docs

multiple

19.0.0 "hafnium-hippo" (2024-11-19)

Breaking Changes

cdk

• • Since cdk.high-contrast targets a media query instead of a class, the specificity of the styles it emits is lower than before.
• • The overlay stays are now loaded slightly later than before which can change their specificity. You may have to update any overlay style overrides.

• • Virtual scrolling lists now have proper type checking which can reveal some previously-hidden compilation errors.

  • fix(cdk/scrolling): adds ngTemplateContextGuard

  implements ngTemplateContextGuard for CdkVirtualForOf directive

  material

• • The ripples styles are now loaded slightly later than before which can change their specificity. You may have to update any ripple style overrides.
• • mixinColor and CanColor have been removed. Use a host binding instead.
  • mixinDisableRipple and CanDisableRipple have been removed. Use input transforms instead.
  • mixinDisabled and CanDisable have been removed. Use input transforms instead.
  • mixinInitialized and HasInitialized have been removed. Use a Subject that emits in ngOnInit instead.
  • mixinTabIndex and HasTabIndex have been removed. Use input transforms instead.

    google-maps

• • The new @googlemaps/markerclusterer API should be imported instead of the old one. Read more at: https://github.com/googlemaps/js-markerclusterer
  • The MapMarkerClusterer class has been renamed to DeprecatedMapMarkerClusterer.
  • The map-marker-clusterer selector has been changed to deprecated-map-marker-clusterer.

    multiple

• • In order for Material to be compatible with recent changes in Sass and upcoming changes in the CSS standard, tokens are now emitted in-place, rather the being hoisted to the top of the selector. As a result, some token overrides might not apply anymore. This is relevant primarily for the cases like @include mat.button-theme($theme); --mat-button-color: red;. It can be resolved by wrapping the overrides with & {}, for example @include mat.button-theme($theme); & { --mat-button-color: red; }.
• • MatButton.ripple is no longer available.
  • MatCheckbox.ripple is no longer available.
  • MatChip.ripple is no longer available.

    material-date-fns-adapter

    | Commit | Type | Description | | -- | -- | -- | | 234e5e0e8 | feat | add support for date-fns 4 (#29744) |

    youtube-player

    | Commit | Type | Description | | -- | -- | -- | | 09da06b42 | fix | ready event not emitting | | 288598750 | fix | startSeconds not applied when using placeholder |

    google-maps

    | Commit | Type | Description | | -- | -- | -- | | 1bd976c6a | feat | Add support for some mouse events #29741 (#29747) | | a05475e76 | feat | deprecate marker cluster component | | c70aae15b | feat | implement new marker clusterer | | b9deeee85 | fix | add schematic to switch to the new clusterer name | | a6709497f | fix | expose all clusterer types (#29905) | | 74c2a081f | fix | resolve CLI errors in ng update schematic (#29947) |

    material

    | Commit | Type | Description | | -- | -- | -- | | 9122335b2 | feat | checkbox: add new aria properties to MatCheckbox (#29457) | | 64ed7ca71 | feat | core: add experimental theme demo (#29636) | | a58e6f671 | feat | core: add theme-overrides mixin (#29858) | | d206225c5 | feat | core: create focus-indicator structural styles loader (#29763) | | b519b4785 | feat | core: default to color-scheme theme type (#29907) | | ea0d1ba7b | feat | core: deprecate the core mixin (#29906) | | 486990912 | feat | core: rename theme mixin (#29857) | | 4b49d7354 | feat | core: switch system prefix from sys to mat-sys (#29908) | | 1abb484aa | feat | input: add the ability to interact with disabled inputs (#29574) | | 4adc3725d | feat | schematics: create v19 core removal schematic (#29768) | | 9c3af284f | feat | schematics: Switch custom theme schematic to use theme mixin instead of define-theme and add high contrast override mixins (#29642) | | 3fc1f9a1b | feat | schematics: Update custom theme schematic to work with light-dark and use theme-overrides mixin (#29911) | | ff3d342fd | feat | tabs: add alignTabs in MatTabsConfig (#29779) | | 371446a7c | feat | theming: Disambiguate token names in theme overrides (#29859) | | 9546fe77e | feat | timepicker: add test harnesses | | 2646e0885 | feat | timepicker: add timepicker component | | de6c20686 | fix | bottom-sheet: add height minHeight maxHeight to config (#29794) | | fcb76d3ed | fix | core: add missing system variables (#29624) | | 5ad133d07 | fix | core: allow optgroup overrides through core-overrides (#29897) | | 0fb4247ce | fix | core: avoid browser inconsistencies when parsing time | | 855ed4948 | fix | core: avoid having to manually load ripple styles | | d0d59b784 | fix | core: change ng-add to use mat.theme (#29990) | | a8e40ec34 | fix | core: correctly identify color input (#29909) | | edce90652 | fix | core: delete deprecated APIs (#29651) | | 54875a325 | fix | core: drop sanity checks (#29688) | | ef14c2869 | fix | core: option showing double selected indicator in high contrast mode | | 5403b4b07 | fix | core: remove unused motion system vars (#29920) | | 613cf5406 | fix | core: rename sys vars from mat-app to mat-sys (#29879) | | d0e178b75 | fix | core: stop manually instantiating MatRipple directive (#29630) | | d55ec612c | fix | core: update prebuilt themes to use mat.theme (#29989) | | 7cf8c6c46 | fix | datepicker: calendar font tokens not being picked up (#29610) | | 5ba97925b | fix | form-field: avoid touching the DOM on each state change | | a2cd04902 | fix | form-field: incorrect form field border radius with system-level themes (#29966) | | 5345a875f | fix | input: preserve aria-describedby set externally | | 9dcb95a72 | fix | list: remove unnecessary high contrast styles | | dbcb921d5 | fix | menu: handle keyboard events through dispatcher (#29997) | | de5e57ad1 | fix | menu: use static elevation (#29968) | | 482009bac | fix | schematics: add explicit system variable prefix schematic (#29980) | | 75631fb0b | fix | sidenav: prevent the content from jumping when hydrated (#29991) | | 14e9ec7cc | fix | timepicker: always re-focus input | | 1eda48604 | fix | timepicker: hide toggle icon from assistive technology | | 490bcfe38 | fix | timepicker: more flexible interval parsing | | fb6e20290 | fix | timepicker: text field in parse error not up to date | | 9b5ee9d55 | fix | timepicker: value considered as invalid by default |

    cdk

    | Commit | Type | Description | | -- | -- | -- | | f4a02adb7 | feat | a11y: use native media query for high contrast detection (#29678) | | 9b4085c6e | feat | private: create cdk-visually-hidden style loader (#29757) | | df21d2b09 | fix | overlay: avoid having to manually load structural styles | | 560878a23 | fix | overlay: load structural styles in a cascade layer (#29725) | | 873eb01e0 | fix | portal: remove ComponentFactoryResolver usages (#27427) | | 5439460d1 | fix | scrolling: adds ngTemplateContextGuard (#27276) | | ad18e6d74 | fix | text-field: avoid having to manually load text field styles | | bd84c2a67 | fix | tree: fix issue where isExpanded wouldn't be set if placed before isExpandable (#29565) | | 3b4ade5a0 | fix | tree: only handle keyboard events directly from the node (#29861) | | f6066c23f | fix | tree: warn if mixed node types are used within the same tree |

    mat

    | Commit | Type | Description | | -- | -- | -- | | 8f0369a27 | fix | paginator: fix focus issues with paginator buttons (#29379) |

    multiple

    | Commit | Type | Description | | -- | -- | -- | | 01711b180 | fix | account for mixed declarations in latest Sass version (#29596) | | cb1450fc7 | fix | change fallbacks to use m3 (#29528) | | a9da72ed1 | fix | consolidate strong focus indicators (#29623) | | be342289c | fix | remove final references to ComponentFactoryResolver (#29832) | | d1d53f51a | fix | remove usages of Sass globals (#29972) | | b3a9062ed | fix | ripples not showing up in some cases (#29672) | | 485bd9923 | fix | stop exposing internal ripple implementation (#29622) |

18.2.14 "osmium-oracle" (2024-11-19)

cdk

18.2.13 "strontium-sauce" (2024-11-13)

cdk

material

18.2.12 "galaxite-galaxy" (2024-11-06)

material

18.2.11 "limonite-lemon" (2024-10-31)

cdk

material

18.2.10 "plastic-monkey" (2024-10-23)

material

18.2.9 "curite-castle" (2024-10-17)

material

18.2.8 "actinium-angle" (2024-10-09)

cdk

material

18.2.7 "lava-labyrinth" (2024-10-03)

cdk

material

18.2.6 "emerald-egg" (2024-09-25)

material

18.2.5 "bismuth-badge" (2024-09-20)

cdk

material

18.2.4 "aramid-angle" (2024-09-12)

cdk

material

18.2.3 "parchment-deluge" (2024-09-04)

material

18.2.2 "steel-sword" (2024-08-28)

cdk

material

18.2.1 "plastic-panda" (2024-08-22)

cdk

material

18.2.0 "technetium-tapas" (2024-08-14)

Deprecations

material

• Tree controller deprecated. Use one of levelAccessor or childrenAccessor instead. To be removed in a future version.

  • BaseTreeControl, TreeControl, FlatTreeControl, and NestedTreeControl deprecated
  • CdkTree#treeControl deprecated. Provide one of CdkTree#levelAccessor or CdkTree#childrenAccessor instead.
  • MatTreeFlattener deprecated. Use MatTree#childrenAccessor and MatTreeNode#isExpandable instead.
  • MatTreeFlatDataSource deprecated. Use one of levelAccessor or childrenAccessor instead of TreeControl.

  Note when upgrading: isExpandable works differently on Trees using treeControl than trees using childrenAccessor or levelAccessor. Nodes on trees that have a treeControl are expandable by default. Nodes on trees using childrenAccessor or levelAccessor are not expandable by default. Provide isExpandable to override default behavior.

• Setting tabindex of tree nodes deprecated. By default, Tree ignores tabindex passed to tree nodes.

  • MatTreeNode#tabIndex deprecated. MatTreeNode ignores Input tabIndex and manages its own focus behavior.
  • MatTreeNode#defaultTabIndex deprecated. MatTreeNode ignores defaultTabIndex and manages its own focus behavior.
  • MatNestedTreeNode#tabIndex deprecated. MatTreeNode ignores Input defaultTabIndex and manages its own focus behavior.
  • LegacyTreeKeyManager and LEGACY_TREE_KEY_MANAGER_FACTORY_PROVIDER deprecated. Inject a TreeKeyManagerFactory to customize keyboard behavior.

  Note when upgrading: an opt-out is available for keyboard functionality changes. Provide LEGACY_TREE_KEY_MANAGER_FACTORY_PROVIDER to opt-out of Tree managing its own focus. When provided, Tree does not manage it’s own focus and respects tabindex passed to TreeNode. When provided, have the same focus behavior as before this commit is applied.

  Add Legacy Keyboard Interface demo, which shows usage of LEGACY_TREE_KEY_MANAGER_FACTORY_PROVIDER. Add Custom Key Manager, which shows usage of injecting a TreeKeyManagerStrategy

• disabled renamed to isDisabled.
  • CdkTreeNode#disabled deprecated and alias to CdkTreeNode#isDisabled

    material

    | Commit | Type | Description | | -- | -- | -- | | ddc307e28 | feat | button-toggle: allow disabled buttons to be interactive (#29550) | | 841760101 | feat | checkbox: add the ability to interact with disabled checkboxes (#29474) | | 0af3b6175 | feat | radio: add the ability to interact with disabled radio buttons (#29490) | | 4292e1b3a | feat | slide-toggle: add the ability to interact with disabled toggle (#29502) | | a018fb0ee | feat | tooltip: replicate tooltipClass to default MatTooltipDefaultOptions (#29467) | | aaf0d5156 | fix | checkbox: account for disabledInteractive in harness | | d22a24d66 | fix | list: checkmark not visible in high contrast mode (#29546) | | a259b016b | fix | radio: account for disabledInteractive in harness | | fd47a0e60 | fix | radio: avoid error if destroyed quickly (#29507) | | 08d2e3e69 | fix | slide-toggle: account for disabledInteractive in harness | | fd416a30e | fix | tooltip: remove aria-describedby when disabled (#29520) | | ff36c80f9 | fix | tree: add levelAccessor, childrenAccessor, TreeKeyManager; a11y and docs improvements (#29062) | | 1f992d06c | fix | tree: aria-expanded attribute should not appear in the leaf node (#29273) |

    cdk

    | Commit | Type | Description | | -- | -- | -- | | b2c051d2c | feat | drag-drop: add input to specify dragged item scale (#29392) |

    multiple

    | Commit | Type | Description | | -- | -- | -- | | db5b8dc29 | feat | fallback to system level variables (#29480) |

18.1.5 "ruthenium-roulette" (2024-08-14)

material

18.1.4 "pewter-polka" (2024-08-07)

material

18.1.3 "plastic-beach" (2024-07-31)

cdk

material

18.1.2 "velvet-violin" (2024-07-24)

material

18.1.1 "tantalum-tale" (2024-07-17)

cdk

material

18.1.0 "coral-odyssey" (2024-07-10)

cdk

material

cdk-experimental

multiple

18.0.6 "gallium-grape" (2024-07-03)

material

18.0.5 "plastic-puppy" (2024-06-26)

cdk

material

18.0.4 "caesium-carnival" (2024-06-20)

cdk

material

18.0.3 "gossamer-glacier" (2024-06-12)

material

18.0.2 "velvet-viola" (2024-06-05)

cdk

material

18.0.1 "plastic-baby" (2024-05-29)

material

youtube-player

18.0.0 "satin-sasquatch" (2024-05-22)

Breaking Changes

material

• The following APIs have been renamed. If you update using ng update, your app will be fixed automatically.
  • define-light-theme to m2-define-light-theme
  • define-dark-theme to m2-define-dark-theme
  • define-palette to m2-define-palette
  • get-contrast-color-from-palette to m2-get-contrast-color-from-palette
  • get-color-from-palette to m2-get-color-from-palette
  • get-color-config to m2-get-color-config
  • get-typography-config to m2-get-typography-config
  • get-density-config to m2-get-density-config
  • $red-palette to $m2-red-palette
  • $pink-palette to $m2-pink-palette
  • $indigo-palette to $m2-indigo-palette
  • $purple-palette to $m2-purple-palette
  • $deep-purple-palette to $m2-deep-purple-palette
  • $blue-palette to $m2-blue-palette
  • $light-blue-palette to $m2-light-blue-palette
  • $cyan-palette to $m2-cyan-palette
  • $teal-palette to $m2-teal-palette
  • $green-palette to $m2-green-palette
  • $light-green-palette to $m2-light-green-palette
  • $lime-palette to $m2-lime-palette
  • $yellow-palette to $m2-yellow-palette
  • $amber-palette to $m2-amber-palette
  • $orange-palette to $m2-orange-palette
  • $deep-orange-palette to $m2-deep-orange-palette
  • $brown-palette to $m2-brown-palette
  • $grey-palette to $m2-grey-palette
  • $gray-palette to $m2-gray-palette
  • $blue-grey-palette to $m2-blue-grey-palette
  • $blue-gray-palette to $m2-blue-gray-palette
  • $light-theme-background-palette to $m2-light-theme-background-palette
  • $dark-theme-background-palette to $m2-dark-theme-background-palette
  • $light-theme-foreground-palette to $m2-light-theme-foreground-palette
  • $dark-theme-foreground-palette to $m2-dark-theme-foreground-palette
  • define-typography-level to m2-define-typography-level
  • define-rem-typography-config to m2-define-rem-typography-config
  • define-typography-config to m2-define-typography-config
  • define-legacy-typography-config to m2-define-legacy-typography-config
  • typography-level to m2-typography-level
  • font-size to m2-font-size
  • line-height to m2-line-height
  • font-weight to m2-font-weight
  • letter-spacing to m2-letter-spacing
  • font-family to m2-font-family
  • font-shorthand to m2-font-shorthand

    material-experimental

    | Commit | Type | Description | | -- | -- | -- | | c345df788 | feat | theming: add mixin for customizing checkbox tokens (#28759) | | c932512ba | fix | theming: avoid re-emitting the same tokens from the backwards-compatibility styles |

    material

    | Commit | Type | Description | | -- | -- | -- | | 4473a379f | feat | core: add prebuilt themes based on M3 | | e2a45bf1e | feat | core: Allow namespacing ripple-loader event handler (#28699) | | d679024de | feat | core: move Material 3 support into stable (#28913) | | 4ba4689dc | feat | core: namespace m2-specific theming APIs (#28892) | | 295fd67fa | feat | schematics: Add custom M3 theme schematic (#28766) | | b312b9491 | feat | schematics: use M3 themes in schematics | | f8bd658df | feat | theming: add ability to use sys variables (#28898) | | 49901c640 | fix | button-toggle: use radio pattern for single select Mat toggle button group (#28548) | | 5501d9b40 | fix | core: add migration for M2 theming APIs (#28927) | | 0ccc52830 | fix | core: export all available M3 palettes (#28975) | | a5ad288bf | fix | core: ripple loader not working in shadow DOM (#29015) | | ec9e83db4 | fix | datepicker: resolve repeater warnings in calendar (#29028) | | 6dc8f7e90 | fix | dialog: mark dialog content as scrollable (#28963) | | ae82909a9 | fix | schematics: Add css token renaming migration | | 3e9d3c394 | fix | schematics: add option to generate system variables in M3 schematic | | bdb17c6b3 | fix | schematics: Change themeTypes to a single select instead of a multiselect prompt in M3 theme schematic (#28997) | | c86359dd4 | fix | slide-toggle: no outline when selected in high contrast mode (#28979) | | d4e61e233 | fix | table: use ResizeObserver to react to size changes (#28783) | | a4fc0a097 | fix | theming: remove shadow css variable (#28953) | | 0bb5610d0 | fix | theming: restrict css color usage behind a flag (#28944) | | a332146ff | perf | core: speed up M3 compilation (#29009) |

    cdk

    | Commit | Type | Description | | -- | -- | -- | | d8a6c3edd | fix | observers: don't observe content of comments (#28858) | | 81fe8f322 | fix | observers: Run content changed callback in NgZone (#28870) | | 108cce33b | fix | overlay: Remove use of zone onStable to detach content (#28740) | | d91d0d424 | fix | scrolling: fix virtual scrolling jankiness with run coalescing (#28846) | | c8b62a154 | fix | scrolling: fix virtual scrolling jankiness with run coalescing (#28968) |

    multiple

    | Commit | Type | Description | | -- | -- | -- | | 4719da2c3 | feat | token overrides api (#28910) |

17.3.10 "soft-starfish" (2024-05-22)

cdk

material

17.3.9 "orange-ornament" (2024-05-15)

cdk

material

17.3.8 "rock-rope" (2024-05-08)

cdk

material

17.3.7 "plastic-deer" (2024-05-02)

cdk

17.3.6 "onyx-whisper" (2024-04-24)

cdk

material

multiple

17.3.5 "titanium-bear" (2024-04-17)

cdk

material

google-maps

17.3.4 "aluminum-arrow" (2024-04-11)

cdk

material

17.3.3 "metal-fork" (2024-04-03)

material

multiple

17.3.2 "benitoite-biscuit" (2024-03-28)

cdk

material

17.3.1 "clay-paradox" (2024-03-20)

cdk

17.3.0 "cobalt-catfish" (2024-03-14)

material

google-maps

17.2.2 "metal-marble" (2024-03-06)

cdk

material

material-experimental

multiple

17.2.1 "allactite-acorn" (2024-02-22)

cdk

material

17.2.0 "polymer-prism" (2024-02-14)

cdk

material

material-experimental

16.2.14 "silky-schematic" (2024-02-01)

material

17.1.2 "acrylic-aquarium" (2024-01-31)

material

17.1.1 "plastic-mug" (2024-01-25)

material

material-experimental

multiple

17.1.0 "metal-table" (2024-01-17)

cdk

material

google-maps

youtube-player

material-experimental

material-moment-adapter

material-luxon-adapter

material-date-fns-adapter

multiple

17.0.6 "plastic-spoon" (2024-01-17)

material

16.2.13 "pink-peach" (2024-01-11)

material

17.0.5 "stardust-symphony" (2024-01-10)

cdk

material

multiple

17.0.4 "hematite-house" (2023-12-13)

material

multiple

17.0.3 "opal-kaleidoscope" (2023-12-07)

material

17.0.2 "sand-salmon" (2023-12-01)

material

material-experimental

17.0.1 "plastic-chicken" (2023-11-16)

material

material-experimental

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) |