Angular in 2024

Angular distinguishes itself as a longstanding front-end framework, having undergone substantial transformations since its initial launch. Angular v17, its most recent update, brings exciting new features and enhancements to make development more productive and improve performance. In this blog, we will look at three key features hydration, directives, and, signals.

Hydration for Server-Side Rendering

Server-side rendering (SSR) enhances web application performance by providing fully rendered HTML to the client. It also contributes to the improvement of Search Engine Optimization (SEO) by facilitating search engines in crawling and indexing the application’s content more efficiently.

Hydration denotes the phase in which client-side JavaScript assumes control and initializes based on server-rendered HTML. This integration connects server-rendered content with client-side interactively ensuring faster page load.

When creating and initializing a new Angular application using ng new [project name] in Angular v17, you now have the option to automatically add SSR.

Directives

To improve readability and writability, the newest feature introduces a unified control flow for templates, highlighting a fresh declarative syntax that seamlessly embeds control flow directly into the template. This removes the need for *ngIF, *ngFor and *ngSwitch.

The new syntax closely resembles a typical JavaScript function, with the only distinction being the use of “@” symbol.

    @for (developer of developers(); track $index) {
        <div>{{developer.name}}</div>
    } @empty {
        <h1>List not available</h1>
    }
    @if (developer.role === "front-end developer"){
        <h2>FE Developer</h2>
    }
    @else if(developer.role === "back-end developer"){
        <h2>BE Developers</h2>
    }

In a component template, deferrable views allow the postponement of loading specific dependencies, offering flexibility in managing when they are loaded. Utilizing a deferrable view can trim down your application's initial bundle size or postpone the loading of resource-intensive components, potentially resulting in a faster initial load experience.

@defer {
    <div>Defer State</div>
}
@loading (after 150ms;){
    <div>Load..</div>
}
@placeholder (minimum 150ms;){
    <div>Placeholder</div>
}
@error {
    <div>ERROR!</div>
}

Signals

The new Signals feature is used to report data modifications to the framework, streamlining change detection and rendering processes. There are three reactive primitives with Angular Signals.

• signal() - In angular, signals indicate when the state changes, allowing Angular to determine which component needs to undergo change detection based on these notifications. In the earlier version, Angular would check all components on the page, even when the consumed data remained unchanged. In data propagation, understanding signals for data change is easier to understand than RxJS.
• computed() – Computed signals derive their value from other signals. Such as calculating the total price of an item based on the desired quantity. The computed API combines one or more signals to create a new signal, with the computed signal value being memorized, storing the computed result. It’s important to note that computed signals are read-only and cannot be modified.
• effect() - Effect signals come into play when you need to execute additional operations that are not directly tied to the signal itself. For instance, if you want to trigger an API whenever the state changes, you can achieve this by running a handler function in response to the change using effect signals. Like computed signals, it’s important to note that the values of effect signals should not be modified.

angular.dev

Angular recently unveiled an upgraded developer website featuring revamped documentation, an interactive tutorial system, and an Angular playground, offering developers a comprehensive platform to learn and experiment with Angular. The overall experience has been seamless with intuitive navigation, clear explanations, and a user-friendly interface enhancing the learning journey for developers of all levels.