The recent launch of Angular version 16 introduces exciting updates and improvements to the development experience, as well as better application performance and stability.
1. Angular Signals
Angular Signals is a library that enables the definition of reactive values and the establishment of dependencies between them. Here’s a simple example of how to utilize Angular Signals within an Angular application:
@Component ({
selector: 'my-app',
standalone: true,
template: `
{{ fullName() }} <button (click)="setName('John')">Click</button>
`,
})
export class App {
firstName = signal('Jane');
lastName = signal('Doe');
fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
constructor() {
effect(() => console.log('Name changed:', this.fullName()));
}
setName(newName: string) {
this.firstName.set(newName);
}
}The above code snippet creates a computed value called fullName, which relies on the signals firstName and lastName. Additionally, it defines an effect, a callback function that runs whenever the value of the signals it reads changes.
In this case, the fullName value depends on firstName and lastName, so changing either of them triggers the effect. When the value of firstName is set to John, the browser logs the following message to the console:
Name changed: John Doe.2. Standalone Ng New Collection
Starting from Angular v16, you can create new standalone projects right from the beginning! To try out the developer preview of the standalone schematics, ensure that you have Angular CLI v16 installed and run the following command:
ng new --standaloneBy doing this, you will obtain a simpler project structure without any NgModules. Furthermore, all the generators in the project will produce standalone directives, components, and pipes!
3. Automatic Route Params Mapping
Consider a routing configuration as follows:
export const routes: Routes = [{
path: 'search:/id',
component: SearchComponent,
resolve: {
searchDetails: searchResolverFn
}
}];Before Angular 16, you needed to inject the ActivatedRoute service to retrieve URL parameters, query parameters, or associated data for a particular URL.
Here's an example of how you had to do it:
@Component({
...
})
export class SearchComponent {
readonly #activatedRoute = inject(ActivatedRoute);
readonly id$ = this.#activatedRoute.paramMap(map(params => params.get('id')));
readonly data$ = this.#activatedRoute.data.map(({
searchDetails
}) => searchDetails);
}With Angular 16, you no longer need to inject the ActivatedRoute service to retrieve various route parameters because you can bind them directly to component inputs.
To activate this functionality in an application that uses the module system, set the corresponding value in the RouterModule options:
RouterModule.forRoot(routes, {
bindComponentInputs: true
})For a standalone application, you need to call a function instead:
provideRoutes(routes, withComponentInputBinding());Once you activate this functionality, the component becomes much simpler:
@Component({
...
})
export class SearchComponent {
@Input() id!: string;
@Input() searchDetails!: SearchDetails;
}4. Required Input
A highly anticipated feature for the Angular community is the ability to mark certain inputs as required. Until now, you had to use various workarounds to achieve this, like raising an error in the NgOnInit lifecycle if the variable was not defined or modifying the component's selector to include the mandatory inputs.
However, both of these solutions had their advantages and disadvantages. Starting from version 16, making an input required is as simple as providing a configuration object in the metadata of the input annotation:
@Input({
required: true
}) name!: string;5. Vite as Dev Server
Angular 14 introduced a new JavaScript bundler called EsBuild, which significantly improved build times by approximately 40%. However, you could only realize this performance gain during the build phase and not during development with the dev server.
In the upcoming release of Angular, the Vite build tool enables the use of EsBuild during development as well.
To activate this feature, update the builder configuration in the angular.json file as follows:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser-esbuild",
"options": {
...
}
}Please note that this functionality is still experimental.
Enhancing Development Experience and Performance
Angular version 16 brings exciting updates like Angular Signals for managing data, standalone project creation, automatic route params mapping, required inputs, and integration of Vite for improved development. These enhancements improve the development experience and increase application performance.
