# 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](https://www.youtube.com/live/Wq6GpTZ7AX0?si=OdvlaXlyDvkQ90mV)

## Angular.dev

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699454019379/da7c8004-d937-45e7-9cf1-bebfb7aceb1b.png align="center")

[angular.dev](https://angular.dev/)

## Bye-bye ngFor, ngIf

Yes that's true

### Earlier

**ngFor and ngIf**

```xml
<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

```xml
@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*

```xml
<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.

```xml
<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.

```xml
@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!