Angular 17: latest updates and features

New declarative control flow syntax

It's one of the most updated features in this version. It’s a built-in update allowing the developers to write and manage code effortlessly as it’s similar to other programming languages like Javascript and Python based on @syntax.

You, just need to follow the given step to apply the new declarative control flow syntax

Step 1: Import @angular/ core module.

Step 2: The basic code displayed is something like this

    <div *ngIf="logged; else anonymous user">
        The user is logged in
    </div>
    <ng-template #anonymousUser>
        The user is not logged in
    </ng-template>
            

Add @ prefix to name control flow directive. Additionally, you can use @if in place of ngIf.

    @if (loggedIn) {
        The user is logged in
    }
    @else {
        The user is not logged in
    }               
                    

Step 3: You can use @directive to wrap the content that you would like to display.

Step 4: To assess the condition, pass an expression to the @ directive. You will see the information inside the @ directive if the expression's value is true. You can also apply the following code to display the message only when the isLoggedIn variable true using the @if directive. You can also apply the following code to display the message only when the isLoggedIn variable is true using the @if directive.

    @if(isLoggedIn) {
        <div>
            Great! You are logged in successfully.
        </div>
    } 
    

@else and @elseif directives are used to create more complex logic.

    @if (role === ‘admin'){
        <div>
            You are an admin.
        </div>
    }
    @else if (role === ‘user'){
        <div>
            You are a user.
        </div>
    }
    @else {
        <div>
            You are not logged in.
        </div>
    }     
    

The new declarative control flow syntax makes it considerably simpler to write and manage complex reasoning.

Deferrable views

In this latest version, a deferrable view allows you to load and render views when necessary. Instead of loading all at once, the browser does not request certain resources until the user does not interact with them.

Therefore this feature provides a smooth user experience of the web application while optimising large templates or dynamic views.

    @defer (on viewport) {
        <comment-list />
    } @placeholder {
         <!-- A placeholder content to show until the comments load !-->
        <img src="comments-placeholder.png">
    }
            

First of all, it renders the content of the placeholder block. Next, when the viewport gets visible the loading of the begins. The placeholder is removed by the angular once the loading is completed.

    @defer (on viewport) {
        <comment-list/>
    }
    @loading {
        Loading…
    }
    @placeholder {
        <img src="comments-placeholder.png">
    }
    @error {
        Loading failed :(
    }                 
                    

The above code shows that there are blocks for loading and error states as well.

View transitions API

Angular 17 offers a feature of view translation API where it allows you the change the DOM(Document Object Model) element like div and animate it by the basic syntax

    <div [@triggerName]="expression">
        This content will be animated when it is transitioned to or from
    </div>                 
            

Moreover, this version of transitions API supports multiple browsers at a time. Usually, to coordinate everything, you will need to use JS and CSS together, but Angular 17 provides opt-in-based support.

- (minus)(minus)SSR

As the code explains I have used npx angular/clie@17 to generate a new application in my current folder name directory.

By mentioning --SSR it will add service rending for this project

    @component$$npx- p@angular/cli@17 ng new --directory .
    ?What name would you like to use for the new workspace and initial project?app
    ?Which stylesheet format would you like to use?CSS
    ?Do you want to enable Server-Side Rendering (SSR) and Static Site Generation  
        (SSG/Prerendering)? (y/n)              
                        

Without mentioning --SRR it will be asked if we need that

Migrating to SSR

So, now you already have a project and you are willing to migrate it to server-side rendering

You just need to mention ng add instead of ng new and by this the additional package will be installed and all files will be created which are needed for server side rendering.