[Feature Request] Update Syntax to coincide with new Angular17 syntax

[thecodechef]

update the syntax to use the Angular17 control-flow block syntax https://angular.dev For Statement

@for (item of items) {
  <a [href]="item.link">{{item.title}}</a>
}

For/Empty Statement

@for (item of items) {
  <a [href]="item.link">{{item.title}}</a>
} @empty {
  <p>No Items</p>
}

If Statement

@if (users$ | async; as users) {
  {{ users.length }}
}

If/Else Statement

@if (a > b) {
  {{a}} is greater than {{b}}
} @else if (b > a) {
  {{a}} is less than {{b}}
} @else {
  {{a}} is equal to {{b}}
}

Switch Statement

@switch (condition) {
  @case (caseA) {
    Case A.
  }
  @case (caseB) {
    Case B.
  }
  @default {
    Default case.
  }
}

Defer Statement

@defer ( on <trigger>; when <condition>; prefetch on <trigger>; prefetch when <condition> ) {
  <!-- deferred template fragment -->
  <calendar-cmp />
} @placeholder ( minimum? <duration> ) {
  <!-- placeholder template fragment -->
  <p>Placeholder</p>
} @loading ( minimum? <duration>; after? <duration> ) {
  <!-- loading template fragment -->
  <img alt="loading image" src="loading.gif" />
} @error {
  <!-- error template fragment -->
  <p>An loading error occured</p>
}

[princemaple]

Would love some community contribution 😉

[princemaple]

It was released yesterday and thanks for your contribution!