Omarsoft For IT Solutions (Java Codes ,C#.NET Codes , ASP.NET Codes ,VB.NET Codes ,Oracle Database Administration, Real Application Cluster , Remote Support, Cloud Services , Networks ,Virtualization....
  • الأنظــمــة المكتبية        Windows App Programming
  • أنظــمـةالويــب        Web based systems programming
  • تطبيقات الهواتف الذكية     smartphones programming
  • إدارة قواعــــــد البيــــــــــــــــانات        Database Administration
  • إدارة الشبكـــــــــــــــــــــــــــــــــات        Networks Administration
  • إدارة الســـيــرفرات (ويب - محلية)  Servers Administration
  • إدارة مخـــــــــــــــــازن البيــــــــــــانات     Storage Administration
  •             N Computing & 2X Application services

    Social Icons

Loading...

What’s New in Angular v16?






 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 --standalone

By 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.

Sana'a Yemen - 50th st.

+967 738166685

omar.soft2000@gmail.com

للاتصال بنا CONTACT US

الاسم Name

بريد إلكتروني Email *

رسالة Message *

2015-2023 © All Rights Reserved Omarsoft
Back To Top