New highlights in Angular 16

Angular 16 was released in early May. Here are the highlights of Angular 16 .

New highlights in Angular 16 Picture 1

Angular, developed by Google, is an open source framework widely used in web application development. It offers a powerful set of tools and a wide range of features, allowing you to create dynamic, responsive and scalable web apps.

Angular version 16 introduces exciting new content and improvements to the programming experience and ensures better application stability and performance.

Angular Signals

Angular Signals is a library, which allows to define react values ​​and establish dependencies between them. This is a simple example of how to use Angular Signals in an Angular application.

@Component ({    selector: 'my-app',    standalone: true,    template: ` {{ fullName() }}  `, }) 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 snippet code above generates a calculated value named fullName, based on the signals firstName and lastName. In addition, it defines an effect, a callback function that runs whenever the value of the signal it reads changes.

In this case, the fullName value depends on firstName and lastName, so changing one of them will trigger this effect. When the firstName value is set to John, the browser logs the following message to the console:

Name changed: John Doe.

Independent Ng New Collection

Starting from Angular v16, you can create new standalone projects from scratch! To try the developer standalone schematic preview, make sure you have Angular CLI v16 installed and run the following command:

ng new --standalone

By doing this, you will get a simpler project structure without the need for NgModules. Moreover, the entire generator in the project will give independent commands, elements and pipes!

Automatic Route Params mapping

Consider a routing configuration like this:

export const routes: Routes = [{    path: 'search:/id',    component: SearchComponent,    resolve: {        searchDetails: searchResolverFn    } }];

Before Angular 16, you needed to add the ActivatedRoute service to retrieve the URL parameters, query or related data for a specific URL.

Here is an example of how you would do this:

@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 add the ActivatedRoute service to retrieve the various routing parameters as you can bind them directly to the component input fields.

To enable this feature 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());

After activating this function, the component becomes simpler:

@Component({    . }) export class SearchComponent {    @Input() id!: string;    @Input() searchDetails!: SearchDetails; }

Required input

A highly recommended feature for the Angular community is marking required input fields. Currently, you have to use different methods to achieve this, such as causing an error in the NgOnInit cycle if the variable is undefined or editing the element selector to include required input fields.

However, both of these solutions have their own pros and cons. Starting with version 16, creating a required input field is as simple as providing a configuration object in the input annotation's metadata:

@Input({    required: true }) name!: string;

Vite is a development server

Angular 14 introduces a new JavaScript package called EsBuild, which significantly improves build times by about 40%. However, you can only realize that change during the build phase, not development with server programming.

In the upcoming update of Angular, the Vite build tool allows the use of EsBuild throughout the development process.

To enable this feature, update the builder configuration in the angular.json file as follows:

"architect": {    "build": {        "builder": "@angular-devkit/build-angular:browser-esbuild",        "options": {            .        }    }

Note that this feature is still in beta.

AngularJS 16 has updated with cool features like Angular Singals for data management, standalone project creation, auto-mapping route params, required input, and Vite integration to improve the development process. These upgrades improve the programming experience and increase the performance of the application.

5 ★ | 1 Vote

May be interested

  • Top 6 qualities of IT employers looking forTop 6 qualities of IT employers looking for
    if you are looking for a job, you will have to work with employers. so what are the qualities they are looking for in 2018? here are the top 6 qualities of it employers looking for in 2018. please refer!
  • How does other flat design simulate design?How does other flat design simulate design?
    flat design (flat design) is considered a minimalist design philosophy, ie all graphic elements are made simplest with features such as clear color, angular, open space and all are shown in two-dimensional format.
  • Scope in AngularJSScope in AngularJS
    scope is a special javascript object with the role of linking controllers and views. scope contains information as model data. in the controller, model data can be accessed via the $ scope object.
  • IPhone 12 HighlightsIPhone 12 Highlights
    iphone 12 is upgraded in screen, camera, 5g connectivity, and unique accessories using magsafe features.
  • The highlights on the items have a unique useThe highlights on the items have a unique use
    why is there a very big bun in the top of a wool hat? why do lollipop sticks often have a small hole on it? what are they used for?
  • What's new in Minecraft 1.21.3?What's new in Minecraft 1.21.3?
    minecraft version 1.21.3 brings many new features and improvements, helping players experience more interesting and challenging things in the minecraft world. below are the highlights of this minecraft 1.21.3 update.
  • Redesigned Skype, nice do not ask, can downloadRedesigned Skype, nice do not ask, can download
    skype users must have expected this video chat application to update new features for a long time.
  • PhotoShop: Create beautiful photos with romantic accentsPhotoShop: Create beautiful photos with romantic accents
    just put in a few artistic highlights, the impression of the photo has been greatly multiplied. here are the simple operations on the software to help you achieve efficiency ...
  • Ulefone Armor X5: Military standard smartphone, 5,000 mAh battery, price more than 3 millionUlefone Armor X5: Military standard smartphone, 5,000 mAh battery, price more than 3 million
    ulefone armor x5 is a smartphone with an aggressive and angular design. the machine is resistant to impact standards according to us military standards mil-std-810g thanks to the outer shell is finished from plastic and aluminum.
  • 100+ best male hair models today 2020100+ best male hair models today 2020
    100+ the most beautiful male hair models today. if a male face is angular, it needs soft hair, a round face needs trimmed hair, or delicate bends. hair stylists for the most popular hairstyles in men make it look cool