Angular Renaissance (v17)

A leap forward

Yes, an amazing pre-release event and wonderful new updates are on our way. Here is a concise and ready-to-use set of features introduced in the Special Angular Event

Angular.dev

What they call a future home for Angular development is just documentation embedded with coding playgrounds and "run and see" tutorials.

angular.dev

Bye-bye ngFor, ngIf

Yes that's true

Earlier

ngFor and ngIf

<div *ngFor="let item of items; trackBy: trackByItems">
    <p style="color:red" *ngIf="item.sold">({{ item.id }}) {{ item.name }}</red>
    <p style="color:green" *ngIf="item.sold">({{ item.id }}) {{ item.name }}</red>
</div>

Now

@for (item of items) {
    @if(item.sold) {
        <p style="color:red">({{ item.id }}) {{ item.name }}</red>      
    } @else {
        <p style="color:green">({{ item.id }}) {{ item.name }}</red>
    }
} @empty {
    <p>No items</p>
}

In addition, we have switch with case and default

<div>
  @switch (user.country) {
    @case ('france') {
      <span>Bonjour!</span>
    }
    @case ('germany') {
      <span>Hallo!</span>
    }
    @case ('india') {
      <span>Namaste!</span>
    }
    @default {
      <span>Hello!</span>
    }
  }
</div>

Deferred Loading

New template syntax that can defer the loading of a component till some condition is met.

<div>
    @defer{
        <really-big-component />
    }
    @placeholder (minimum 500ms) {
        <p>Data Not Ready</p>
    }
    @loading (after 100ms; minimum 1s) {
        <img alt="loading..." src="loading.gif" />
    }
    @error {
        <p>Failed to load the data</p>
    }
</div>

@defer uses on or/and when triggers.

@defer (on viewport; on timer(5s)) {
  <calendar-cmp />
} @placeholder {
  <img src="placeholder.png" />
}

@defer (when cond) {
  <calendar-cmp />
}

Standalone components and app

With the new update, the ng new and ng g component will create standalone components or app by default.

Conclusion

A lot of new interesting features and updates are on the way and they will certainly make developer life easy.

Happy Coding!