shhdharmen

Ultimate @angular/material update guide - All versions!

Update from	Update to	Links
v10	v11	Article
v11	v12	Article
v12	v13	Article
v13	v14	Article
v14	v15	[Article](https://angular-material.dev/courses/m2-ng-components/m2-ng-components/upda

shhdharmen

If you are looking for sample code changes when migrating from Angular Material 17 to 18 (for both M2 and M3), checkout this project on GitHub.

Below table was created for the article: Updating to Angular Material 18: Keeping Support for Material 2 and Adding Support for Material 3

| Index | Applies to | Old | Change for M2 | Change for M3 | | ----- | ----------------------------- | -

shhdharmen

#	Methods	Use when
1	addSvgIcon, addSvgIconInNamespace	Each icon has separate SVG file
2	addSvgIconLiteral, addSvgIconLiteralInNamespace	Each icon has SVG string literals, for example, icon string is coming from server
3	addSvgIconResolver	Individual icon's SVG files' location share same logic, for example, they are located under one folder
4	addSvgIconSet, addSvgIconSetInNamespace	All icons are present in same SVG sprite file
5	addSvgIconSetLiteral, addSvgIconSetLiteralInNamespace	All icons are present in same SVG sprite and sprite is stored as string, for example, coming from server

shhdharmen

Table of Contents

• Readme first!
• Search Places
  • Styles
    • Search Box
    • Keyboard Shortcut
    • Table
  • Functionality
    • Search box
    • Table

shhdharmen

	@Attribute()	@Input()
Availability	In constructor through dependency injection	After component/directive initialization, in ngOnInit life-cycle hook
Type support	string	all
General usage	HTML attribute	DOM property or custom data
Code Snippets

shhdharmen

@import '../core/theming/palette';
@import '../core/theming/theming';
@import '../core/typography/typography-utils';


@mixin _mat-toolbar-color($palette) {
  background: mat-color($palette);
  color: mat-color($palette, default-contrast);
}

shhdharmen

@import '../../cdk/overlay/overlay';
@import '../../cdk/a11y/a11y';
@import '../../cdk/text-field/text-field';

// Core styles that can be used to apply material design treatments to any element.
@import 'style/elevation';
@import 'ripple/ripple';
@import 'option/option-theme';
@import 'option/optgroup-theme';
@import 'selection/pseudo-checkbox/pseudo-checkbox-theme';

shhdharmen

// this will generate rgba colors from bootstrap colors and theme-colors
// examples : bg-light-rgba-1, text-dark-rgba-8, bg-primary-rgba-3, text-purple-rgba-5
// please ensure to import ~bootstrap/scss/bootstrap.scss before this file
$all-colors: map-merge($map1: $colors, $map2: $theme-colors);
$transparencies: (1:0.1, 2: 0.2, 3: 0.3, 4: 0.4, 5: 0.5, 6: 0.6, 7: 0.7, 8: 0.8, 9: 0.9);
@each $color in map-keys($all-colors) {
    @each $alpha,
    $opacity in $transparencies {
      @each $prop, $abbrev in (background-color: bg, color: text){
        .#{$abbrev}-#{$color}-rgba-#{$alpha} {

shhdharmen

@mixin notification-theme($notifications-theme) {
    $default-color: map-get($notifications-theme, default);
    $info-color: map-get($notifications-theme, info);
    $success-color: map-get($notifications-theme, success);
    $warn-color: map-get($notifications-theme, warning);
    $error-color: map-get($notifications-theme, error);
    .default-notification-overlay,
    .info-notification-overlay,
    .success-notification-overlay,
    .warning-notification-overlay,

shhdharmen

import { Injectable, NgZone } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material';

@Injectable({ providedIn: 'root' })
export class NotificationService {
  constructor(
    private readonly snackBar: MatSnackBar,
    private readonly zone: NgZone
  ) { }