Open in app

Search Write

Get unlimited access to the best of Medium for less than $1/week. Become a member

What’s New In Angular 17?

Angular 17: Yaay or Naay?

Thamodi Wickramasinghe · Follow

Published in Bits and Pieces · 6 min read · 3 days ago

336 1
Angular always aims to please the developers with new versions.

This time, they have come up with Angular 17 with a new set of features that
aim to elevate the developer experience, boost performance, and provide
more tools for building scalable web applications.

Angular 17: A Major Leap Forward

Angular 17 was released on the 8th of November, 2023, and there are so
many exciting things to look out for. Here’s a summary of the coolest
features of Angular 17.

Logo redesign

Angular.dev

Control flow syntax

Deferrable views

Signals: stable

Dev tools

Server-side rendering improvements

New Lifestyle hooks

Style and Style Urls as Strings

Performance Improvements

Security Improvements

Logo Redesign
Angular Team rebranded the whole look of angular by redesigning the logo.
This is the first time the initial AngularJS 2012 logo has been updated.

The new Angular logo is more exciting.

Angular.dev
Along with the rebranding, the Angular Team changed their website as well.

They moved from angular.io to angular.dev. The new website contains

documentation along with interactive tutorials and a “Playground feature”,
where we can execute code without installing anything. It also enables
online debugging.
Control Flow Syntax
Angular 17 introduced this new built-in control flow for templates, which
provides a new declarative syntax of writing control flow straight into the
template rather than using *ngIf , *ngFor and ngSwitch.

Let’s look at an example. We have added the below code in app.component.ts

import { Component } from '@angular/core';

import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'Control Flows Angular 17';
isUserAvailable: boolean = true;
}

Inside we have declared a variable called isUserAvailable and assigned the

value as true. Let's try to display different HTML components based on the
value.

1. Traditional Method

<h1>Angular Previous Versions</h1>

<div *ngIf="isUserAvailable; else other">

User available
</div>
<ng-template #other>
User Not available
</ng-template>

2. New Control Flow with Angular 17

<h1>Angular 17</h1>
@if (isUserAvailable) {
<p>User available</p>
} @else {
<p>User Not available</p>
}

New control flows are similar to if-else conditions and easy to remember.
Angular 17 also provides @else if control flow, which makes development
easier.

Furthermore, let's look at how ngSwitch has been optimized.

1. Traditional Method

<div [ngSwitch]="userLevel">
<admin-dashboard *ngSwitchCase="admin"/>
<moderator-dashboard *ngSwitchCase="moderator"/>
<user-dashboard *ngSwitchDefault/>
</div>

2. New Control Flow with Angular 17

@switch (userLevel) {
@case ('admin') { <admin-dashboard/> }
@case ('moderator') { <moderator-dashboard/> }
@default { <user-dashboard/> }
}

Deferrable views
Angular 17 also introduced deferrable views using @deffer templates. Using
this template we can lazy load components when a condition is met. For
example, if we want to display a separate component, when “user scrolls to
that section” or “in 5 seconds” we can use @deffer templates. Let’s explain
the concept using an example.

@defer (when show) {

<ns-demo-component />
}
@placeholder {
<div>Something until the loading starts</div>
}
@loading (after 500ms; minimum 500ms) {
<div>Loading...</div>
}
 @error {<div>Something went wrong</div>
}

We have configured <ns-demo-component> it to be visible "when show". Using

the @placeholder tag we can display the default value till the component
loads.

We can use the @loading block to define what will be displayed till the
component is loaded. If no @loading block is defined, the default
placeholder will be displayed. Loading of the @defer block can be quite fast,
therefore, there can be a flickering effect with the @loading block. To avoid
that we can define the display duration of the @loading block using
after and minimum fields.

Using the @error block, we can display something if an error occurs.

Deferrable views contain the below triggers.

on idle — lazy load when the browser is idle

on immediate — lazy load immediately

on timer() — delay loading with a timer

on viewport

on interaction and on interaction() — lazy load when the user interacts

with a particular element

on hover and on hover() — lazy load when the user hovers an element

Signals Are Now Stable

Angular Signals tracks how and where your state is used throughout an
application. As a result, it allows the framework to optimize rendering updates.

const count = signal(0);

With Angular 17, signals API has become stable. To know more about
Angular Signals, read the documentation here.

Dev Tools
Angular has introduced this cool new feature of viewing, “dependency
injection” in dev tools. Based on this feature, we can view the dependencies
of your components in the component inspector, injector tree, dependency
resolution path, and providers declared within the individual injectors.

Server-Side Rendering Improvements

Angular 17 also, brings to you the capability of Server side rendering (SSR)
and static site generation (SSG). While creating a new application with ng
new, developers get a prompt to enable SSR and SSG. For the already created
applications, we can use the below command to enable SSR.

ng new angular-demo-application --ssr

Furthermore, the SSR package has been moved from Angular Universal to
the Angular/CLI repository.

To install SSR, we can use the below command.

 ng add @angular/ssr

New Lifecycle Hooks

Two new lifecycle hooks have been introduced with Angular 17 which is
afterRender and afterNextRender.

afterRender can be used to register a callback which will be invoked every

time the application finishes rendering while afterNextRender can be used to
register a callback to be invoked the next time the application finishes
rendering.

@Component({
selector: 'my-chart-cmp',
template: `<div #chart>{{ ... }}</div>`,
})
export class MyChartCmp {
@ViewChild('chart') chartRef: ElementRef;
chart: MyChart|null;

constructor() {
afterNextRender(() => {
this.chart = new MyChart(this.chartRef.nativeElement);
}, {phase: AfterRenderPhase.Write});
}
}

Style and styleUrls as strings

In previous versions, Angular components support multiple stylesheets per
component. If we want to point to multiple inline styles we can include them
in an array. With Angular 17, the styles array has been switched to styleUrl

for a simple, more logical way.

 @Component({
styles: [`
...
`]
})

...@Component({
styleUrls: ['styles.css']
})...
@Component({
styles: `
...
`
})
...@Component({
styleUrl: 'styles.css'
})
...

Performance Improvements
Android 17 introduces a set of performance improvements. As explained
earlier, using deferrable views, we can reduce the workload of change
detection. In previous versions, angular would process each element. With
deferrable views, we can eliminate that process, because Angular would
identify which component needs to be displayed at what time.

Furthermore, built-in control flow would significantly improve the

performance. Specifically, this is applicable for @for loops.

Angular 17 also brings improvements to the compilation of TypeScript code.

These improvements lead to faster build times, particularly for complex
TypeScript codebases.

Security Improvements
Angular 17 focuses on, not only performance but also security. It has
introduced two new improvements.

Stricter Type Checking- By enabling type checking we can avoid runtime

errors.

Sanitization APIs- By having updated sanitization APIs, will help prevent

cross-site scripting (XSS) attacks, ensuring that user input data is handled
securely.

Migration
Migration to Angular 17 is supposed to be as smooth as possible. We can use
ng update to upgrade the related dependencies. Angular strives to be
backward compatible with older versions. Even though, there may be
deprecations and breaking changes that require some adjustments during
migration. The best practice is to read the documentation before upgrading
to major versions. Furthermore, Angular update guide and migration tools
will assist you in managing the changes.

Conclusion
With the introduction of Angular 17, the Angular Team reaffirms its position
as a leading front-end framework.

Furthermore, they are already planning for the next major version and is
planning to include some great features. In the next release, they plan to
release Angular’s signal-based reactivity, hybrid rendering, and learning
journey.
 We can expect more exciting features in Angular 18,
which has already been planned to be released in
May 2024.

I hope you enjoyed this article. Thank you for reading!

Learn More

A Modern Approach for Angular Development

Build composable and modernized Angular apps with Bit!
blog.bitsrc.io

How we Build a Component Design System

Building a design system with components to standardize and scale
our UI development process.
blog.bitsrc.io

How We Build Micro Frontends

Building micro-frontends to speed up and scale our web
development process.
blog.bitsrc.io
A Modern Approach to React Development
Build composable and modernized React apps with Bit!
blog.bitsrc.io

Monorepo, Poly-repo, or No Repo at all?

Using Bit to make “irreversible decisions” easy to make and easy to
change.
blog.bitsrc.io

Bit Components: The Web’s New Building Blocks

Why everything you know about microservices, micro frontends,
monorepos, and even plain old component libraries, is…
blog.bitsrc.io

Programming Technology Angular Frontend Development Web Development

Written by Thamodi Wickramasinghe Follow

46 Followers · Writer for Bits and Pieces

More from Thamodi Wickramasinghe and Bits and Pieces

Thamodi Wickramasinghe in Bits and Pieces Vidura Senevirathne in Bits and Pieces

Implementing The Circuit Breaker Top 5 CSS Frameworks in 2024

Pattern in a Microservices Based… Bootstrap, Tailwind, Foundation, Bulma, UIKit
Exploring the Circuit Breaker Pattern in — Explore the best CSS frameworks for 2024.
NestJS

9 min read · Jan 16 7 min read · 6 days ago

394 1 603 5

Chameera Dulanga in Bits and Pieces Thamodi Wickramasinghe in Bits and Pieces

Implementing Saga Pattern in a You’ve Been Building Angular Apps

Microservices with Node.js Wrong!
How to Implement Saga Pattern with Node.js Break Free from Monolithic Limits: Build
Better with Micro Frontends in Angular
6 min read · Jan 3
10 min read · Nov 17, 2023

831 3
773 7

See all from Thamodi Wickramasinghe See all from Bits and Pieces

Recommended from Medium

Pravin M in Dev Genius Netanel Basal in Netanel Basal

Design Patterns in Angular Simplifying File Imports in Angular

Source: Design Patterns in Angular with New Loader Options
There's an update in the application builder in
v17.1.0 that introduces new loader options,…

10 min read · Dec 1, 2023 2 min read · 5 days ago

231 1 281 2
Lists

General Coding Knowledge Coding & Development

20 stories · 881 saves 11 stories · 428 saves

ChatGPT prompts ChatGPT

37 stories · 1085 saves 21 stories · 440 saves

A Smith in JavaScript in Plain English Fatih Akpiyal

Best Frontend Frameworks for Web Angular Advanced Components

Development in 2024 Hello everyone,
Quick Summary: Selecting the right front-end
framework is, in fact, a significantly importan…

11 min read · Jan 25 5 min read · Jan 22

193 7 66

Rainer Hahnekamp in ngconf J.D Christie

NgRx Signal Store: The Missing Building a Clean and Scalable
Piece to Signals Frontend Architecture
Before the arrival of Signals, state As the digital landscape continues to evolve,
management fell into the responsibility of… the importance of frontend architecture for…

10 min read · Jan 25 · 6 min read · Jan 14

195 180 5

See more recommendations