Angular

What’s of Angular 15

  • Stable Standalone Component API

  • Single file component

What’s of Angular 16

  • Angular Signal (Developer preview)

  • Support Tailwind CSS

What’s new of Angular 17?

New built-in control flow

@if

Old *ngIf else syntax
<div *ngIf="condition; else elseBlock">
  Content to render when condition is true.
</div>
<ng-template #elseBlock>
  Content to render when condition is false.
</ng-template>
New @if and @else syntax
@if (a > b) {
  {{a}} is greater than {{b}}
} @else if (b > a) {
  {{a}} is less than {{b}}
} @else {
  {{a}} is equal to {{b}}
}

@for

Old *ngFor syntax
<li *ngFor="let user of users; index as i; first as isFirst">
  {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
</li>
New @for syntax
@for (item of items; track item.id) {
  {{ item.name }}
}

@for (item of items; track item.id; let idx = $index, e = $even) {
  Item #{{ idx }}: {{ item.name }}
}

Inside @for contents, several implicit variables are always available:

Variable Meaning

  • $count Number of items in a collection iterated over

  • $index Index of the current row

  • $first Whether the current row is the first row

  • $last Whether the current row is the last row

  • $even Whether the current row index is even

  • $odd Whether the current row index is odd

@switch

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

Angular Signal

Basically Angular signal is a special type of variable that holds a value and also provides a notification mechanism to tell other program when the variable changes.

  • signal() - Create a signal

  • computed() - Create a computed signal from another signal

  • effect() - Create an effect call back when signal value changed

  • input() - Create an input prop

  • output() - Create an output prop

  • model() - Create a model signal prop, which is writable