Angular language preview

1. Built-in control flow

@if / @else and interpolation

horizon-dark

@if (user) {
  <p>Hello, {{ user.name }}</p>
} @else {
  <p>Guest</p>
}

atom-one-dark

@if (user) {
  <p>Hello, {{ user.name }}</p>
} @else {
  <p>Guest</p>
}

github-dark

@if (user) {
  <p>Hello, {{ user.name }}</p>
} @else {
  <p>Guest</p>
}

dracula

@if (user) {
  <p>Hello, {{ user.name }}</p>
} @else {
  <p>Guest</p>
}

nord

@if (user) {
  <p>Hello, {{ user.name }}</p>
} @else {
  <p>Guest</p>
}

github

@if (user) {
  <p>Hello, {{ user.name }}</p>
} @else {
  <p>Guest</p>
}

2. @for and @defer

list rendering with track, plus deferred loading

horizon-dark

@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <p>No items</p>
}

@defer {
  <heavy-chart />
} @placeholder {
  <p>Loading chart</p>
}

atom-one-dark

@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <p>No items</p>
}

@defer {
  <heavy-chart />
} @placeholder {
  <p>Loading chart</p>
}

github-dark

@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <p>No items</p>
}

@defer {
  <heavy-chart />
} @placeholder {
  <p>Loading chart</p>
}

dracula

@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <p>No items</p>
}

@defer {
  <heavy-chart />
} @placeholder {
  <p>Loading chart</p>
}

nord

@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <p>No items</p>
}

@defer {
  <heavy-chart />
} @placeholder {
  <p>Loading chart</p>
}

github

@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <p>No items</p>
}

@defer {
  <heavy-chart />
} @placeholder {
  <p>Loading chart</p>
}

3. Directives and bindings

*ngIf, two-way bind, events, property bind, template ref

horizon-dark

<input
  *ngIf="visible"
  [(ngModel)]="name"
  (click)="save()"
  [class.active]="focused"
  #field
/>

atom-one-dark

<input
  *ngIf="visible"
  [(ngModel)]="name"
  (click)="save()"
  [class.active]="focused"
  #field
/>

github-dark

<input
  *ngIf="visible"
  [(ngModel)]="name"
  (click)="save()"
  [class.active]="focused"
  #field
/>

dracula

<input
  *ngIf="visible"
  [(ngModel)]="name"
  (click)="save()"
  [class.active]="focused"
  #field
/>

nord

<input
  *ngIf="visible"
  [(ngModel)]="name"
  (click)="save()"
  [class.active]="focused"
  #field
/>

github

<input
  *ngIf="visible"
  [(ngModel)]="name"
  (click)="save()"
  [class.active]="focused"
  #field
/>