Angular v17.2 is now available | Angular v17.2 is released

Angular v17.2 is now available and released on Feb 14, 2024.

While Angular v17.2 is considered a minor release, it still packs some interesting surprises and improvements:

Key Features:

Experimental Material 3 Support

Get a glimpse of the future with basic usage of Material 3 components like MatButton, MatCard, and MatIcon. Material 3 is basically an alternative theme and still material 2 will be in support.

below is the Saas code


@use '@angular/material' as mat;
@use '@angular/material-experimental' as matx;

.dark-theme {
    @include mat.all-component-themes($m3-dark-theme);
  }
  
  .light-theme {
    @include mat.all-component-themes($m3-light-theme);
  }

and below is the component code

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    -card class="light-theme">
      Welcome to Angular!</h2>
      -button class="dark-theme">Click me</mat-button>
    </mat-card>
  `,
}) }

Signal Queries
A signal is basically a wrapper around a value that can notify users whenever the value changes.
Signals can contain any type of value, from simple primitives to complex data structures.
A signal value is always read-only using the getter function, which allows us to track where the signal is used.

@viewChild, @viewchildern decorators, and ngAfterViewInit() life cycle hook are now signal based alternatives

// app.component.ts

// app.component.ts
import { Component } from '@angular/core';
@Component({
template: `
    element to signal query</div>
  `
})
export class App {
  // it returns the Signal | undefined>
  divEle = viewChild>('ele');

  // it returns the Signal> and it ensures that signal value is not undefined
  divEleReq = viewChild.required>('ele');

  // it returns Signal[]>
  divEles = viewChildren('ele');
}

and now ngAfterViewInit is replaced by the signal Effect, so now no need for the ngAfterViewInit lifecycle hook, this signal effect will be used in the constructor

import {Component,effect}  from  '@angular/core'  ;
import {RouterOutlet}  from  '@angular/router'  ;

@Component({
      selector:'app-root' ,
      standalone : true ,
      imports :  [RouterOutlet ],
      templateUrl   :  './app.component.html'     ,
      styleUrl   : './app.component.css'  })
export class
  AppComponent {
  constructor  () {
    effect (() => {
        console.log("output");
      })
  }
}

Model Inputs:
Now we have signal signal-based alternative to ngModel, Simplify template syntax for binding values to DOM inputs like checkboxes and radio buttons.

it introduces the model (this is the new regular API) which we can directly use i template and it will help us in the way data binding

import { Component, effect } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  //templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  template: `
   ="checkbox" [(checked)]="isChecked"> Is checked?
`,

})
export class AppComponent {
  isChecked : boolean = false;
  protected checked = model(false); //this is the new regular API
  
}

Netlify Loader: Integrate Angular applications seamlessly with Netlify's deployment platform.

// angular.json (architect -> build -> options)

"outputHashing": "all",
"sourceMap": true,
"budgets": [
  { "type": "initial", "maximumWarning": "250kb", "maximumError": "300kb" }
],
"ngswConfigPath": "angular.json.ngsw",
"serviceWorker": true,
"optimization": true,
"scripts": [
  // ...
  "node_modules/@angular/platform-server/dist/esm/platform-server.mjs"
],
"styles": [
  // ...
],
"loader": {
  "type": "netlify"
}

Hydration Debugging in DevTools

Identify and resolve data mismatches between server-rendered and client-hydrated content. you can enable it in the Angular DevTools settings and use it to inspect data discrepancies between server-rendered and client-hydrated components.

Other Enhancements:

Control Vite development server pre-bundling for more granular optimization.

Configure PostCSS directly within the application builder for tailored styling.

Various bug fixes and stability improvements across the core framework.
Angular CLI now supports Bun's package manager for a different build experience.

Remember:

These features are mainly experimental and might change in future releases.
Consider upgrading to v17.2 for a taste of the future and explore the experimental functionalities.