Angular 17, a Brand New Look

Angular, a popular Single Page Application (SPA) framework, recently released version 17, introducing a declarative block template syntax and overhauling the framework documentation and logo.

The declarative block template refers to a new set of commands introduced by the Angular template engine that share the following form:

@command {
  <component>
}

The first implementation, Built-in control flow, simplifies using the for/switch/if statements.

The current Angular block template syntax often confuses new developers as it is verbose and hides the statements within the HTML, making it easy to miss.

<div [ngSwitch]="expression">
  <component-one *ngSwitchCase="valu1"/>
  <component-two *ngSwitchCase="value2"/>
  <default-component *ngSwitchDefault/>
</div>

In comparison, the new syntax separates the conditional statements from the components, making them much easier to follow.

@switch (expression) {
  @case ('value1') { <component-one/> }
  @case ('value2') { <component-two/> }
  @default { <user-dashboard/> }
}

While the new block template syntax might look like a simple ergonomic improvement, it also provides better type-checking, reduced bundle size, and significant performance improvement when using the for loop.

The built-in control flow feature is still in developer preview, as there are still some gaps in content projection. To enable it in your project, run the following code in the CLI:

ng generate @angular/core:control-flow

The second capability introduced using the declarative block template syntax is deferrable views.

Deferrable views offer a simple alternative to ViewContainerRef by providing a declarative way to defer parts of the template using the @defer tag.

@defer {
  <deferred-component />
}  @placeholder {
  <div>Loading...</div>
}

The defer command accepts an optional trigger that determines when the deferred component will be loaded; perhaps the most useful strategy, 'on viewport,' renders the component when it comes into view.

@defer (on viewport) {
  <deferred-component />
} @placeholder {
  <div>Loading...</div>
}

In contrast, the 'on idle' strategy will fetch the components when the browser is idle. This is the default behavior.

@defer (on viewport; prefetch on idle) {
  <comment-list />
} @placeholder {
  <div>Loading...</div>
}

On the documentation front, the Angular team provided the first significant overhaul to the Angular branding and documentation site.

Angular branding hasn't changed much since the original release of AngularJS 2012, and a rebrand was overdue. The new, colorful branding brings a modern twist to the old logo.

The new branding is part of a brand-new documentation site that provides a simpler onboarding process and a new interactive tutorial and playground. While existing developers might need to re-orientate themselves, the overall experience seems smoother than the older site.

For a full list of changes, please consult the official release notes on the Angular Github repository. Angular is open-source software available under the MIT license.