• Angular 17 Features Hint

    Angular 17 was released on Nov 2023
    Features

    		1️⃣ Built-in control flow. 
       
  
                @if (loggedIn) {
          The user is logged in
        } @else {
          The user is not logged in
        }
    2️⃣. Built-in for loop 
       
  
          

              @for (user of users; track user.id) {
                {{ user.name }}
              } @empty {
                Empty list of users
              }
    2️⃣.Deferrable views
       
  
           @defer { }
    3️⃣.New lifecycle hooks.

    🔸 afterRender — register a callback to be invoked each time the application finishes rendering.

    🔸 afterNextRender — register a callback to be invoked the next time the application finishes rendering

       
  
     @Component({
 		 selector: 'my-chart-cmp',
    	 template: `
    {{ ... }}
    `,
})
export class MyChartCmp {
    @ViewChild('chart') chartRef: ElementRef;
     chart: MyChart|null;

  constructor() {
    afterNextRender(() => {
      this.chart = new MyChart(this.chartRef.nativeElement);
    }, {phase: AfterRenderPhase.Write});
  }
}
    4️⃣Vite and esbuild power the ng serve and ng build commands.
    5️⃣Improved debugging for dependency injection.
    6️⃣Support for View-Transition API'S
    7️⃣Router Refactoring.

    🔸 paramsInheritanceStrategy

    🔸 urlUpdateStrategy

    🔸 canceledNavigationResolution

    🔸 malformedUriErrorHandler ( moved to UrlSerializer.parse)

    🔸 titleStrategy

    🔸 urlHandlingStrategy
    8️⃣SSR and SSG. Angular team is making a real effort to improve server-side rendering and generation (SSR/SSG).

    ===========================================================================================================

    ✅ Angular v17 supports node.js versions: ^18.13.0 || ^20.9.0

    ✅ Angular v17 supports TypeScript 5.2 : >=5.2.0 <5.4.0

    ✅ Angular V17 supports rxjs version ^6.5.3 || ^7.4.0

    Features

    Angular 16 takes this to the next level by supporting standalone project creation.

    If you want to migrate your code to the new control flow syntax automatically, there’s a schematic available in the @angular/core package: ng g @angular/core:control-flow

    You can now use provideRouter and RouterModule.forRoot to set up routes for testing instead of using setupTestingRouter. The interesting fact is that few Router properties have now moved to these setup Routes, such as:

    ✅ Up to 90% faster runtime with a built-in control flow loops in public benchmarks

    ✅ Up to 87% faster builds for hybrid rendering and 67% for client-side rendering

    Comments

    Post a Comment