New Control Flow Syntax<\/strong><\/h2>\n\n\n\nThe new control flow, in my opinion, is the most crucial change in this release. After a long debate and consultation with the Angular community, the team is introducing a completely new @ \u2013 syntax. <\/p>\n\n\n\n
It provides the functionality of structural directives *ngIf, *ngFor, *ngSwitch with some extra features. Let\u2019s dive into some examples.<\/p>\n\n\n\n
Example #1 \u2013 NgIf with the else option and the new syntax<\/strong><\/h3>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image1.png\")
<\/a><\/figure>\n\n\n\nAs we can see, the old way of displaying some info up to some predicate was to use a *ngIf structural directive. The else block has to be implemented using another ng-template, and reference to that was set after the else keyword. <\/p>\n\n\n\n
The new syntax gives us a plain if-else control without adding extra templates.<\/p>\n\n\n\n
Example #2 \u2013 Empty with @for loop<\/strong><\/h3>\n\n\n\nWith the new syntax comes a new feature \u2013 handling empty lists! Previously, to handle an empty list with proper information for the user, we had to create a separate ngTemplate and extra ngContainer to bind the if <\/em>statement with its else <\/em>option. <\/p>\n\n\n\nWith the new syntax, we can do the same more shortly by declaring @empty <\/em>right after for<\/em> block scope. It’s also worth mentioning that, in the past, when using the ngFor directive, we had the option to utilize a trackBy property and a recognition function to optimize rendering. The new syntax simplifies this process by requiring only the property name the track function will use for object recognition.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image2.png\")
<\/a><\/figure>\n\n\n\nExample #3 \u2013 Switch with @switch<\/strong><\/h3>\n\n\n\nSwitch syntax in a new version is very similar to the old implementation of NgSwitch.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image3.png\")
<\/a><\/figure>\n\n\n\nHere are a couple of reasons why the new flow syntax has been introduced.<\/p>\n\n\n\n
The previous implementation of the control flow was based on the zone-dependent application. Structural directives are strongly coupled with Change Detection mechanisms. Angular Team has decided to go in the direction of a zoneless application with a Signals implementation, and now it\u2019s making another step towards it.<\/p>\n\n\n\n
Therefore, the team has decided to create a new implementation of control flow, and the plan is to deprecate the current implementation of structural directives as ngIf and ngFor<\/em> but not remove them “until the ecosystem (including community-authored content) has switched over to the new control flow.\u201d<\/em> The NG Team has prepared an auto-migration scheme to facilitate incorporating new syntax changes. The only command that needs to be run is:<\/p>\n\n\n\nng g @angular\/core:control-flow<\/pre>\n\n\n\nBe aware that this schematic is still only a developer preview migration.<\/p>\n\n\n\n
Deferred Loading<\/strong><\/h2>\n\n\n\nA defer block is The most exciting feature of a new control flow. The best way to show it\u2019s magic is just by presenting an example. <\/p>\n\n\n\n
Let\u2019s assume we have a simple pipe that capitalizes the input.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image4.png\")
<\/a><\/figure>\n\n\n\nBy @defer block, the angular compiler knows it shouldn\u2019t immediately import that pipe (if it\u2019s not used elsewhere) while loading the component, but when the predicate is true. <\/p>\n\n\n\n
The chunk of javascript, including upperCasePipe, is downloaded when we click the button.<\/p>\n\n\n\n![\"giphy\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image5.gif\")
<\/a><\/figure>\n\n\n\nWe can see how our application is chunked after a successful build \u2013 Angular CLI will display how many chunks can be fetched.<\/p>\n\n\n\n![\"lazy](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image6-1024x363.png\")
<\/a><\/figure>\n\n\n\nWhat if the connection is slow or broken?<\/strong><\/h2>\n\n\n\nAngular handles that easily by providing possibilities to define the view during loading and in case of error.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image7.png\")
<\/a><\/figure>\n\n\n\nFor example, if we turn on an offline mode:<\/p>\n\n\n\n![\"defer](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image8.png\")
<\/a><\/figure>\n\n\n\n![\"defer](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image9.png\")
<\/a><\/figure>\n\n\n\nBut @defer control flow is much more powerful than it looks at first sight. We can connect the visibility of the component with some triggers.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image10.png\")
<\/a><\/figure>\n\n\n\nAlso, if we want to pass the responsibility to the browser, we can let the application manage to import code when a browser has finished its processes and is in an idle state.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image11.png\")
<\/a><\/figure>\n\n\n\nThis is particularly useful when you have heavy loadings that burden your page loading and user experience by slowing down features.<\/p>\n\n\n\n
Difference between on and when<\/strong><\/h2>\n\n\n\nwhen:<\/strong> Some condition that triggers the change when it becomes true. After the change, it won’t revert to the previous condition even if the variable becomes false again.<\/p>\n\n\n\non:<\/strong> Needs a predefined trigger that includes actions like interaction or entering the viewport. We\u2019re able to combine multiple triggers. <\/p>\n\n\n\nPossible triggers:<\/p>\n\n\n\n
\n- idle <\/strong>\u2013 triggered when the browser reaches an idle state,<\/li>\n\n\n\n
- hover <\/strong>\u2013 triggered when the mouse has hovered over a specified area,<\/li>\n\n\n\n
- immediate <\/strong>\u2013 triggered without any waiting,<\/li>\n\n\n\n
- timer(x) <\/strong>\u2013 triggered after a specified amount of time,<\/li>\n\n\n\n
- viewport <\/strong>\u2013 triggered when a specified element comes into the viewport, in other words, when it\u2019s visible to the user,<\/li>\n\n\n\n
- interaction <\/strong>\u2013 triggered when the user interacts with a specified element.<\/li>\n<\/ul>\n\n\n\n
Why is it a crucial change? Advantages and disadvantages<\/strong><\/h2>\n\n\n\nThere are a couple of reasons why this change is a vast improvement for the Angular apps.<\/p>\n\n\n\n
Chunk loading<\/strong><\/h3>\n\n\n\nWe could dynamically import the module’s code on demand by lazy loading modules. Right now, the Angular team has taken another step.<\/p>\n\n\n\n
By importing a chunk of code on demand \/ idle \/ interaction, we can enhance user experience by fastening the page and loading the component.<\/p>\n\n\n\n
Ease way of placing placeholders, loading view, and error handlers <\/strong><\/h3>\n\n\n\nThe new syntax facilitates handling transition or failure states. Handling placeholders no longer needs other templates, interceptors, etc. Some problems with network traffic can also be handled with ease.<\/p>\n\n\n\n
Support for view transitions API<\/strong><\/h2>\n\n\n\nView Transitions API is a feature that enables the creation of animated transitions between different DOM states. Until now applications handled animations, transitions by writing specific css and js files.
View Transition API is a new way of handling animations. <\/p>\n\n\n\n
Full description of View Transitions API<\/a>.<\/p>\n\n\n\nAll major browsers now support the feature.<\/strong> IIn November 2023, View Transitions API was available in:<\/p>\n\n\n\n\n- Chrome,<\/li>\n\n\n\n
- Edge,<\/li>\n\n\n\n
- Opera,<\/li>\n\n\n\n
- Samsung Browser.<\/li>\n<\/ul>\n\n\n\n
Configuration in Angular is straightforward. All we have to do is configure the router during the bootstrapping application:<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image12.png\")
<\/a><\/figure>\n\n\n\nBy providing this configuration, the default transition animation is visible:<\/p>\n\n\n\n
Without view Transition API:<\/p>\n\n\n\n![\"without](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image13.gif\")
<\/a><\/figure>\n\n\n\nWith View Transition API:<\/p>\n\n\n\n![\"with](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image14.gif\")
<\/a><\/figure>\n\n\n\nWe can customize the way the animation is going, e.g.:<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image15.png\")
<\/a><\/figure>\n\n\n\nSupport for TypeScript 5.2<\/strong><\/h2>\n\n\n\nAngular 17 comes with support for TypeScript 5.2. What is included in that?<\/p>\n\n\n\n
The new use of keywords as a remedy for resource management<\/strong><\/h3>\n\n\n\nUsing keywords can measurably help to handle resources. In a nutshell, it is a new block of code that declares a disposable resource. When the variable to which the resource was assigned is not used anymore, the method [Symbol.dispose]() is invoked, releasing the help. <\/p>\n\n\n\n
Let\u2019s take a look. We have some MockResourceHandler<\/em>:<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image16.png\")
<\/a><\/figure>\n\n\n\nThe old way of handling this resource would be to open it to try and finally block scope and to take closing connection in the final scope.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image17-1.png\")
<\/a><\/figure>\n\n\n\nThe new way requires changing the implementation of MockResourceHandler<\/em>; the disposable interface and the [Symbol have to be implemented.dispose]() method has to be implemented as well.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image18.png\")
<\/a><\/figure>\n\n\n\nThen, releasing resources will happen automatically on the method end:<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image19.png\")
<\/a><\/figure>\n\n\n\nDecorator Metadata<\/strong><\/h2>\n\n\n\nWhen using decorator functions, they gain access to a fresh metadata attribute within the object. Once all decorators have been executed within or attached to a class, the object can be reached within the class through the Symbol.metadata<\/em>.<\/p>\n\n\n\n![\"code\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/12\/image20.png\")
<\/a><\/figure>\n\n\n\nMore details in ECMAScript proposal you can find on GitHub<\/a>.<\/p>\n\n\n
<\/a><\/figure>\n\n\n\nAs we can see, the old way of displaying some info up to some predicate was to use a *ngIf structural directive. The else block has to be implemented using another ng-template, and reference to that was set after the else keyword. <\/p>\n\n\n\n
The new syntax gives us a plain if-else control without adding extra templates.<\/p>\n\n\n\n
Example #2 \u2013 Empty with @for loop<\/strong><\/h3>\n\n\n\nWith the new syntax comes a new feature \u2013 handling empty lists! Previously, to handle an empty list with proper information for the user, we had to create a separate ngTemplate and extra ngContainer to bind the if <\/em>statement with its else <\/em>option. <\/p>\n\n\n\nWith the new syntax, we can do the same more shortly by declaring @empty <\/em>right after for<\/em> block scope. It’s also worth mentioning that, in the past, when using the ngFor directive, we had the option to utilize a trackBy property and a recognition function to optimize rendering. The new syntax simplifies this process by requiring only the property name the track function will use for object recognition.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nExample #3 \u2013 Switch with @switch<\/strong><\/h3>\n\n\n\nSwitch syntax in a new version is very similar to the old implementation of NgSwitch.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nHere are a couple of reasons why the new flow syntax has been introduced.<\/p>\n\n\n\n
The previous implementation of the control flow was based on the zone-dependent application. Structural directives are strongly coupled with Change Detection mechanisms. Angular Team has decided to go in the direction of a zoneless application with a Signals implementation, and now it\u2019s making another step towards it.<\/p>\n\n\n\n
Therefore, the team has decided to create a new implementation of control flow, and the plan is to deprecate the current implementation of structural directives as ngIf and ngFor<\/em> but not remove them “until the ecosystem (including community-authored content) has switched over to the new control flow.\u201d<\/em> The NG Team has prepared an auto-migration scheme to facilitate incorporating new syntax changes. The only command that needs to be run is:<\/p>\n\n\n\nng g @angular\/core:control-flow<\/pre>\n\n\n\nBe aware that this schematic is still only a developer preview migration.<\/p>\n\n\n\n
Deferred Loading<\/strong><\/h2>\n\n\n\nA defer block is The most exciting feature of a new control flow. The best way to show it\u2019s magic is just by presenting an example. <\/p>\n\n\n\n
Let\u2019s assume we have a simple pipe that capitalizes the input.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nBy @defer block, the angular compiler knows it shouldn\u2019t immediately import that pipe (if it\u2019s not used elsewhere) while loading the component, but when the predicate is true. <\/p>\n\n\n\n
The chunk of javascript, including upperCasePipe, is downloaded when we click the button.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nWe can see how our application is chunked after a successful build \u2013 Angular CLI will display how many chunks can be fetched.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nWhat if the connection is slow or broken?<\/strong><\/h2>\n\n\n\nAngular handles that easily by providing possibilities to define the view during loading and in case of error.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nFor example, if we turn on an offline mode:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nBut @defer control flow is much more powerful than it looks at first sight. We can connect the visibility of the component with some triggers.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nAlso, if we want to pass the responsibility to the browser, we can let the application manage to import code when a browser has finished its processes and is in an idle state.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nThis is particularly useful when you have heavy loadings that burden your page loading and user experience by slowing down features.<\/p>\n\n\n\n
Difference between on and when<\/strong><\/h2>\n\n\n\nwhen:<\/strong> Some condition that triggers the change when it becomes true. After the change, it won’t revert to the previous condition even if the variable becomes false again.<\/p>\n\n\n\non:<\/strong> Needs a predefined trigger that includes actions like interaction or entering the viewport. We\u2019re able to combine multiple triggers. <\/p>\n\n\n\nPossible triggers:<\/p>\n\n\n\n
\n- idle <\/strong>\u2013 triggered when the browser reaches an idle state,<\/li>\n\n\n\n
- hover <\/strong>\u2013 triggered when the mouse has hovered over a specified area,<\/li>\n\n\n\n
- immediate <\/strong>\u2013 triggered without any waiting,<\/li>\n\n\n\n
- timer(x) <\/strong>\u2013 triggered after a specified amount of time,<\/li>\n\n\n\n
- viewport <\/strong>\u2013 triggered when a specified element comes into the viewport, in other words, when it\u2019s visible to the user,<\/li>\n\n\n\n
- interaction <\/strong>\u2013 triggered when the user interacts with a specified element.<\/li>\n<\/ul>\n\n\n\n
Why is it a crucial change? Advantages and disadvantages<\/strong><\/h2>\n\n\n\nThere are a couple of reasons why this change is a vast improvement for the Angular apps.<\/p>\n\n\n\n
Chunk loading<\/strong><\/h3>\n\n\n\nWe could dynamically import the module’s code on demand by lazy loading modules. Right now, the Angular team has taken another step.<\/p>\n\n\n\n
By importing a chunk of code on demand \/ idle \/ interaction, we can enhance user experience by fastening the page and loading the component.<\/p>\n\n\n\n
Ease way of placing placeholders, loading view, and error handlers <\/strong><\/h3>\n\n\n\nThe new syntax facilitates handling transition or failure states. Handling placeholders no longer needs other templates, interceptors, etc. Some problems with network traffic can also be handled with ease.<\/p>\n\n\n\n
Support for view transitions API<\/strong><\/h2>\n\n\n\nView Transitions API is a feature that enables the creation of animated transitions between different DOM states. Until now applications handled animations, transitions by writing specific css and js files.
View Transition API is a new way of handling animations. <\/p>\n\n\n\n
Full description of View Transitions API<\/a>.<\/p>\n\n\n\nAll major browsers now support the feature.<\/strong> IIn November 2023, View Transitions API was available in:<\/p>\n\n\n\n\n- Chrome,<\/li>\n\n\n\n
- Edge,<\/li>\n\n\n\n
- Opera,<\/li>\n\n\n\n
- Samsung Browser.<\/li>\n<\/ul>\n\n\n\n
Configuration in Angular is straightforward. All we have to do is configure the router during the bootstrapping application:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nBy providing this configuration, the default transition animation is visible:<\/p>\n\n\n\n
Without view Transition API:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nWith View Transition API:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nWe can customize the way the animation is going, e.g.:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nSupport for TypeScript 5.2<\/strong><\/h2>\n\n\n\nAngular 17 comes with support for TypeScript 5.2. What is included in that?<\/p>\n\n\n\n
The new use of keywords as a remedy for resource management<\/strong><\/h3>\n\n\n\nUsing keywords can measurably help to handle resources. In a nutshell, it is a new block of code that declares a disposable resource. When the variable to which the resource was assigned is not used anymore, the method [Symbol.dispose]() is invoked, releasing the help. <\/p>\n\n\n\n
Let\u2019s take a look. We have some MockResourceHandler<\/em>:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nThe old way of handling this resource would be to open it to try and finally block scope and to take closing connection in the final scope.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nThe new way requires changing the implementation of MockResourceHandler<\/em>; the disposable interface and the [Symbol have to be implemented.dispose]() method has to be implemented as well.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nThen, releasing resources will happen automatically on the method end:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nDecorator Metadata<\/strong><\/h2>\n\n\n\nWhen using decorator functions, they gain access to a fresh metadata attribute within the object. Once all decorators have been executed within or attached to a class, the object can be reached within the class through the Symbol.metadata<\/em>.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nMore details in ECMAScript proposal you can find on GitHub<\/a>.<\/p>\n\n\n
With the new syntax, we can do the same more shortly by declaring @empty <\/em>right after for<\/em> block scope. It’s also worth mentioning that, in the past, when using the ngFor directive, we had the option to utilize a trackBy property and a recognition function to optimize rendering. The new syntax simplifies this process by requiring only the property name the track function will use for object recognition.<\/p>\n\n\n\n Switch syntax in a new version is very similar to the old implementation of NgSwitch.<\/p>\n\n\n\n Here are a couple of reasons why the new flow syntax has been introduced.<\/p>\n\n\n\n The previous implementation of the control flow was based on the zone-dependent application. Structural directives are strongly coupled with Change Detection mechanisms. Angular Team has decided to go in the direction of a zoneless application with a Signals implementation, and now it\u2019s making another step towards it.<\/p>\n\n\n\n Therefore, the team has decided to create a new implementation of control flow, and the plan is to deprecate the current implementation of structural directives as ngIf and ngFor<\/em> but not remove them “until the ecosystem (including community-authored content) has switched over to the new control flow.\u201d<\/em> The NG Team has prepared an auto-migration scheme to facilitate incorporating new syntax changes. The only command that needs to be run is:<\/p>\n\n\n\n Be aware that this schematic is still only a developer preview migration.<\/p>\n\n\n\n A defer block is The most exciting feature of a new control flow. The best way to show it\u2019s magic is just by presenting an example. <\/p>\n\n\n\n Let\u2019s assume we have a simple pipe that capitalizes the input.<\/p>\n\n\n\n By @defer block, the angular compiler knows it shouldn\u2019t immediately import that pipe (if it\u2019s not used elsewhere) while loading the component, but when the predicate is true. <\/p>\n\n\n\n The chunk of javascript, including upperCasePipe, is downloaded when we click the button.<\/p>\n\n\n\n We can see how our application is chunked after a successful build \u2013 Angular CLI will display how many chunks can be fetched.<\/p>\n\n\n\n Angular handles that easily by providing possibilities to define the view during loading and in case of error.<\/p>\n\n\n\n For example, if we turn on an offline mode:<\/p>\n\n\n\n But @defer control flow is much more powerful than it looks at first sight. We can connect the visibility of the component with some triggers.<\/p>\n\n\n\n Also, if we want to pass the responsibility to the browser, we can let the application manage to import code when a browser has finished its processes and is in an idle state.<\/p>\n\n\n\n This is particularly useful when you have heavy loadings that burden your page loading and user experience by slowing down features.<\/p>\n\n\n\n when:<\/strong> Some condition that triggers the change when it becomes true. After the change, it won’t revert to the previous condition even if the variable becomes false again.<\/p>\n\n\n\n on:<\/strong> Needs a predefined trigger that includes actions like interaction or entering the viewport. We\u2019re able to combine multiple triggers. <\/p>\n\n\n\n Possible triggers:<\/p>\n\n\n\n There are a couple of reasons why this change is a vast improvement for the Angular apps.<\/p>\n\n\n\n We could dynamically import the module’s code on demand by lazy loading modules. Right now, the Angular team has taken another step.<\/p>\n\n\n\n By importing a chunk of code on demand \/ idle \/ interaction, we can enhance user experience by fastening the page and loading the component.<\/p>\n\n\n\n The new syntax facilitates handling transition or failure states. Handling placeholders no longer needs other templates, interceptors, etc. Some problems with network traffic can also be handled with ease.<\/p>\n\n\n\n View Transitions API is a feature that enables the creation of animated transitions between different DOM states. Until now applications handled animations, transitions by writing specific css and js files. Full description of View Transitions API<\/a>.<\/p>\n\n\n\n All major browsers now support the feature.<\/strong> IIn November 2023, View Transitions API was available in:<\/p>\n\n\n\n Configuration in Angular is straightforward. All we have to do is configure the router during the bootstrapping application:<\/p>\n\n\n\n By providing this configuration, the default transition animation is visible:<\/p>\n\n\n\n Without view Transition API:<\/p>\n\n\n\n With View Transition API:<\/p>\n\n\n\n We can customize the way the animation is going, e.g.:<\/p>\n\n\n\n Angular 17 comes with support for TypeScript 5.2. What is included in that?<\/p>\n\n\n\n Using keywords can measurably help to handle resources. In a nutshell, it is a new block of code that declares a disposable resource. When the variable to which the resource was assigned is not used anymore, the method [Symbol.dispose]() is invoked, releasing the help. <\/p>\n\n\n\n Let\u2019s take a look. We have some MockResourceHandler<\/em>:<\/p>\n\n\n\n The old way of handling this resource would be to open it to try and finally block scope and to take closing connection in the final scope.<\/p>\n\n\n\n The new way requires changing the implementation of MockResourceHandler<\/em>; the disposable interface and the [Symbol have to be implemented.dispose]() method has to be implemented as well.<\/p>\n\n\n\n Then, releasing resources will happen automatically on the method end:<\/p>\n\n\n\n When using decorator functions, they gain access to a fresh metadata attribute within the object. Once all decorators have been executed within or attached to a class, the object can be reached within the class through the Symbol.metadata<\/em>.<\/p>\n\n\n\n More details in ECMAScript proposal you can find on GitHub<\/a>.<\/p>\n\n\n<\/a><\/figure>\n\n\n\nExample #3 \u2013 Switch with @switch<\/strong><\/h3>\n\n\n\n
<\/a><\/figure>\n\n\n\nng g @angular\/core:control-flow<\/pre>\n\n\n\n
Deferred Loading<\/strong><\/h2>\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nWhat if the connection is slow or broken?<\/strong><\/h2>\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nDifference between on and when<\/strong><\/h2>\n\n\n\n
\n
Why is it a crucial change? Advantages and disadvantages<\/strong><\/h2>\n\n\n\n
Chunk loading<\/strong><\/h3>\n\n\n\n
Ease way of placing placeholders, loading view, and error handlers <\/strong><\/h3>\n\n\n\n
Support for view transitions API<\/strong><\/h2>\n\n\n\n
View Transition API is a new way of handling animations. <\/p>\n\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nSupport for TypeScript 5.2<\/strong><\/h2>\n\n\n\n
The new use of keywords as a remedy for resource management<\/strong><\/h3>\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nDecorator Metadata<\/strong><\/h2>\n\n\n\n
<\/a><\/figure>\n\n\n\n