Hello Angular 16

On 3rd May 2023, Angular 16 is launched. Some of the essential features of Angular 16 are,

• Improved standalone APIs
• Angular Signals
• takeUntillDestrory RxJS operator
• DestroyRef as an injectable provider
• Required input properties for directives
• Passing router data as a component input
• Self-closing tags
• ES Build support
• Nondestructive hydration for SSR
• Unit Testing with Jest
• Support for TypeScript 5.0
• ngTemplateOutlet strick type checking
• Configure zonejs (ngZone) in bootstrapApplication and many more.

Read the official announcement here: https://blog.angular.io/angular-v16-is-here-4d7a28ec680d

To play around, Let us start with updating to Angular 16.

**npm uninstall -g @angular/cli

npm install -g @angular/cli@latest**

After upgrading to Angular 16, you can create a Standalone Angular application using the CLI Command,

ng new myapp –standalone

In the new project structure, you can see that there are no modules, and there is one new file named app.config.ts

The app.config file contains the providers that should be available to the root component and all its children in a standalone Angular application.

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes) ]
};

In the main.ts file, you can see that application is bootstrapped using AppComponent and the configuration from appConfig

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

Here AppComponent is a standalone component used as a root component to bootstrap the application.

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 = 'myapp';
}

You can notice in the AppComponent,

• Its standalone property is set to true
• It’s all dependencies are passed inside the imports array You can add new components to the application using the ng g c name command. Since the application is configured for standalone API, the newly created component would be a standalone component. Add a new component in the application,

ng g c product

To use ProductComponent inside the AppComponent, add it as a dependency in the imports array.

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

If a standalone component depends on a module, you pass that module in the imports array of the component. For example, in the ProductComponent, you can pass ReactiveFormsModule as a dependency, as shown in the following code block,

@Component({
  selector: 'app-product',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent {

  fb = inject(FormBuilder);
  login : FormGroup; 
  constructor(){
    this.login = this.fb.group({
      email:[],
      password:[]
    })
  }
}

I have written a detailed article on standalone components. For deep dive, read it here –

https://www.telerik.com/blogs/angular-14-introducing-standalone-components

As of now, you have created an Angular 16 app configured to work with standalone APIs. As discussed, Angular 16 comes with many exciting features, and one such feature is compile time required input check or required @Input properties to a component

export class ProductComponent {

  @Input({required:true}) message?: string; 

While using this component, Angular complains about if you do not pass the message property value.

Required input implies that the directive can’t work without them. Read more about required @Input properties here:

https://debugmode.net/2023/04/17/required-input-properties-in-angular/

Another exciting feature of Angular 16 is fine-grained reactivity with the signal. A signal is a function to create reactive values.

You can create a signal as shown below.

count = 1; 
  counter = signal(this.count); 

  constructor(){
    effect(()=>{
      console.log(this.counter())
    })
  }

  setCount():void{
    this.counter.update(count => count + 1);
  }

You can learn more about signals here –

https://github.com/angular/angular/discussions/49683

Angular 16 has many exciting features, new enhancements, and capabilities to write a scalable, performant Angular app. In further posts, I will write more details about Angular 16 features. I hope you like this blog post. Thanks for reading.