{"id":7016,"date":"2023-05-05T14:14:13","date_gmt":"2023-05-05T14:14:13","guid":{"rendered":"https:\/\/www.ntspl.co.in\/blog\/?p=7016"},"modified":"2024-09-12T05:10:34","modified_gmt":"2024-09-12T05:10:34","slug":"angular-v16-is-here","status":"publish","type":"post","link":"https:\/\/www.ntspl.co.in\/blog\/angular-v16-is-here\/","title":{"rendered":"Angular v16 is here!"},"content":{"rendered":"<p>Six months ago, we reached a significant milestone in Angular\u2019s simplicity and developer experience by <a href=\"https:\/\/blog.angular.io\/angular-v15-is-now-available-df7be7f2f4c8\">graduating the standalone APIs<\/a> from developer preview. Today, we\u2019re thrilled to share that <strong>we\u2019re continuing the Angular Momentum with the biggest release since the initial rollout of Angular<\/strong>; making large leaps in reactivity, server-side rendering, and tooling. All this comes with <a href=\"https:\/\/github.com\/angular\/angular\/releases\">dozens<\/a> of quality-of-life improvements across feature requests, with over 2,500 combined thumbs up on\u00a0GitHub!<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1024\/1*CNy2EclZxC1hmi_govb_7w.png\" alt=\"Visual of for the Angular v16 release showing the text \u201cv16\u201d on a laptop with the Angular logo on the right of the image.\" \/><figcaption>Angular v16\u00a0release<\/figcaption><\/figure>\n<p>This post includes lots of content, capturing most of the improvements we made over the past six months. If you want a quick overview watch the video\u00a0below:<\/p>\n<p><a href=\"https:\/\/medium.com\/media\/a8340c1c8812a65c9e7a327e03749b8e\/href\">https:\/\/medium.com\/media\/a8340c1c8812a65c9e7a327e03749b8e\/href<\/a><\/p>\n<h3>Rethinking Reactivity<\/h3>\n<p>As part of the v16 release we\u2019re excited to share a developer preview of a brand new reactivity model for Angular which brings significant improvements to performance and developer experience.<\/p>\n<p>It\u2019s <strong>entirely backward compatible and interoperable with the current system, and\u00a0enables<\/strong>:<\/p>\n<ul>\n<li>Better run time performance by reducing the number of computations during change detection. Once Angular Signals rollout completely, we\u2019re expecting significant improvements of the <a href=\"https:\/\/web.dev\/inp\">INP<\/a> Core Web Vital metric for apps built with\u00a0signals<\/li>\n<li>Brings a simpler mental model for reactivity, making it clear what are the dependencies of the view and what\u2019s the flow of data through the\u00a0app<\/li>\n<li><a href=\"https:\/\/github.com\/angular\/angular\/discussions\/49684\">Enables fine-grained reactivity<\/a>, which in future releases will allow us to check for changes only in affected components<\/li>\n<li>Makes <a href=\"http:\/\/zone.js\/\">Zone.js<\/a> optional in future releases by using signals to notify the framework when the model has\u00a0changed<\/li>\n<li>Delivers <a href=\"https:\/\/github.com\/angular\/angular\/discussions\/49683#:~:text=against%20this%20goal.-,Computed%20signals,-Computed%20signals%20create\">computed properties<\/a> without the penalty of recomputation in each change detection cycle<\/li>\n<li>Enables better <a href=\"https:\/\/github.com\/angular\/angular\/discussions\/49681\">interoperability with RxJS<\/a> by outlining a <a href=\"https:\/\/github.com\/angular\/angular\/discussions\/49682#:~:text=request%20for%20Angular.-,Signal-based%20inputs,-In%20signal-based\">plan to introduce reactive\u00a0inputs<\/a><\/li>\n<\/ul>\n<p>The initial <a href=\"https:\/\/github.com\/angular\/angular\/discussions\/49090\">GitHub discussion<\/a> hit 682 comments and since then we shared <a href=\"https:\/\/github.com\/angular\/angular\/discussions\/49685\">a series of RFCs<\/a> which received over 1,000\u00a0more!<\/p>\n<p>In v16 you can find a new signals library that\u2019s part of @angular\/core and an RxJS interop package\u200a\u2014\u200a@angular\/core\/rxjs-interop, the full signal integration in the framework is coming later this\u00a0year.<\/p>\n<h4>Angular Signals<\/h4>\n<p>The Angular signals library allows you to define reactive values and express dependencies between them. You can learn more about the properties of the library in the <a href=\"https:\/\/github.com\/angular\/angular\/discussions\/49683\">corresponding RFC<\/a>. Here\u2019s a simple example how to use it with\u00a0Angular:<\/p>\n<pre>@Component({\r\n  selector: 'my-app',\r\n  standalone: true,\r\n  template: `\r\n    {{ fullName() }} &lt;button (click)=\"setName('John')\"&gt;Click&lt;\/button&gt;\r\n  `,\r\n})\r\nexport class App {\r\n  firstName = signal('Jane');\r\n  lastName = signal('Doe');\r\n  fullName = computed(() =&gt; `${this.firstName()} ${this.lastName()}`);\r\n\r\n  constructor() {\r\n    effect(() =&gt; console.log('Name changed:', this.firstName()));\r\n  }\r\n\r\n  setName(newName: string) {\r\n    this.firstName.set(newName);\r\n  }\r\n}<\/pre>\n<p>The snippet above creates a computed value fullName, which depends on the signals firstName and lastName. We also declare an effect, which callback will execute every time we change the value of any of the signals it reads\u200a\u2014\u200ain this case fullName, which means it transitively also depends on firstName and lastName.<\/p>\n<p>When we set the value of firstName to \u201dJohn\u201d, the browser will log into the\u00a0console:<\/p>\n<pre>\"Name changed: John Doe\"<\/pre>\n<h4>RxJS interoperability<\/h4>\n<p>You\u2019ll be able to easily \u201clift\u201d signals to observables via functions from @angular\/core\/rxjs-interop which is in developer preview as part of the v16\u00a0release!<\/p>\n<p>Here\u2019s how you can convert a signal to observable:<\/p>\n<pre>import { toObservable, signal } from '@angular\/core\/rxjs-interop';\r\n\r\n@Component({...})\r\nexport class App {\r\n  count = signal(0);\r\n  count$ = toObservable(this.count);\r\n\r\n  ngOnInit() {\r\n    this.count$.subscribe(() =&gt; ...);\r\n  }\r\n}<\/pre>\n<p>\u2026and here\u2019s an example how you can convert an observable to signal to avoid using the async\u00a0pipe:<\/p>\n<pre>import {toSignal} from '@angular\/core\/rxjs-interop';\r\n\r\n@Component({\r\n  template: `\r\n    &lt;li *ngFor=\"let row of data()\"&gt; {{ row }} &lt;\/li&gt;\r\n  `\r\n})\r\nexport class App {\r\n  dataService = inject(DataService);\r\n  data = toSignal(this.dataService.data$, []);\r\n}<\/pre>\n<p>Angular users often want to complete a stream when a related subject completes. The following illustrative pattern is quite\u00a0common:<\/p>\n<pre>destroyed$ = new ReplaySubject&lt;void&gt;(1);\r\n\r\ndata$ = http.get('...').pipe(takeUntil(this.destroyed$));\r\n\r\nngOnDestroy() {\r\n  this.destroyed$.next();\r\n}<\/pre>\n<p>We are introducing a new RxJS operator called takeUntilDestroy, which simplifies this example into the following:<\/p>\n<pre>data$ = http.get('\u2026').pipe(takeUntilDestroyed());<\/pre>\n<p>By default, this operator will inject the current cleanup context. For example, used in a component, it will use the component\u2019s lifetime.<\/p>\n<p>takeUntilDestroy is especially useful when you want to tie the lifecycle of an Observable to a particular component\u2019s lifecycle.<\/p>\n<h4>Next steps for\u00a0signals<\/h4>\n<p>Next we\u2019ll be working on <a href=\"https:\/\/github.com\/angular\/angular\/discussions\/49682\">signal-based components<\/a> which have a simplified set of lifecycle hooks, and an alternative, more simple way of declaring inputs and outputs. We will also work on a more complete set of examples and documentation.<\/p>\n<p>One of the most popular issues in the Angular repository is \u201c<a href=\"https:\/\/github.com\/angular\/angular\/issues\/5689\">Proposal: Input as Observable<\/a>.\u201d A couple of months ago we <a href=\"https:\/\/github.com\/angular\/angular\/issues\/5689#issuecomment-879474919\">responded<\/a> that we want to support this use case as part of a larger effort in the framework. We\u2019re happy to share that later this year we\u2019ll land a feature that will enable signal-based inputs\u200a\u2014\u200ayou\u2019ll be able to transform the inputs to observables via the interop\u00a0package!<\/p>\n<h3>Server-side rendering and hydration enhanced<\/h3>\n<p>Based on our annual developer survey, server-side rendering is the number one opportunity for improvement for Angular. For the past couple of months we partnered with the <a href=\"https:\/\/web.dev\/aurora\">Chrome Aurora team<\/a> on improving the performance and DX of the hydration and server-side rendering. Today we are happy to share the developer preview of full app non-destructive hydration!<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1024\/1*9aS-J745p45bqdzASTH3sw.png\" alt=\"A banner for Angular hydration with the hydration text in blue water pattern over the Angular logo\" \/><\/figure>\n<p>In the new full app non-destructive hydration, Angular no longer re-renders the application from scratch. Instead, the framework looks up existing DOM nodes while building internal data structures and attaches event listeners to those\u00a0nodes.<\/p>\n<p>The benefits\u00a0are:<\/p>\n<ul>\n<li>No content flickering on a page for end\u00a0users<\/li>\n<li>Better <a href=\"http:\/\/web.dev\/vitals\">Web Core Vitals<\/a> in certain scenarios<\/li>\n<li>Future-proof architecture that enables fine-grained code loading with primitives we\u2019ll ship later this year. Currently this surfaces in progressive lazy route hydration<\/li>\n<li>Easy integration with existing apps, in just a few lines of code (see code snippet\u00a0below)<\/li>\n<li>Incremental adoption of hydration with the ngSkipHydration attribute in templates for components performing manual DOM manipulation<\/li>\n<\/ul>\n<p><strong>In early tests we saw up to 45% improvement of <\/strong><a href=\"http:\/\/web.dev\/lcp\"><strong>Largest Contentful Paint<\/strong><\/a><strong> with full app hydration!<\/strong><\/p>\n<p>Some applications already enabled hydration in production and reported CWV improvements:<\/p>\n<h3>Naveed Ahmed on Twitter: &#8220;Anyone tried the new #Angular Hydration available in the latest version of Angular? Here&#8217;s the @____lighthouse score of https:\/\/t.co\/qWZ11GeNgZ without any hacks:@angular pic.twitter.com\/X7OPefEkRx \/ Twitter&#8221;<\/h3>\n<p>Anyone tried the new #Angular Hydration available in the latest version of Angular? Here&#8217;s the @____lighthouse score of https:\/\/t.co\/qWZ11GeNgZ without any hacks:@angular pic.twitter.com\/X7OPefEkRx<\/p>\n<p>To get started it is as easy as adding a few lines to your\u00a0main.ts:<\/p>\n<pre>import {\r\n  bootstrapApplication,\r\n  provideClientHydration,\r\n} from '@angular\/platform-browser';\r\n\r\n...\r\n\r\nbootstrapApplication(RootCmp, {\r\n  providers: [provideClientHydration()]\r\n});<\/pre>\n<p>You can find more details on how it works in the <a href=\"https:\/\/angular.io\/guide\/hydration\">documentation<\/a>.<\/p>\n<h4>New server-side rendering features<\/h4>\n<p>As part of the v16 release we also <a href=\"https:\/\/github.com\/angular\/universal\/commit\/3af1451abac574f5e57c5f8b45192532bec2b23a\">updated the ng add schematics<\/a> for Angular Universal which enables you to add server-side rendering to projects using standalone APIs. We also <a href=\"https:\/\/github.com\/angular\/universal\/commit\/9fbdb23c528baffa4cb1cda737382b4cab590269\">introduced support for stricter Content Security Policy<\/a> for inline\u00a0styles.<\/p>\n<h4>Next steps of hydration and server-side rendering<\/h4>\n<p>There is more we plan to do here and the work in v16 is just a stepping stone. In certain cases there are opportunities to delay loading JavaScript that is not essential for the page and hydrate the associated components later. This technique is known as partial hydration and we will explore it\u00a0next.<\/p>\n<p>Since Qwik popularized the idea of resumability from Google\u2019s closed-source framework Wiz, we\u2019ve received many requests for this feature in Angular. Resumability is definitely on our radar, and we\u2019re working closely with the Wiz team to explore the space. We\u2019re cautious about the constraints on developer experience it comes with, evaluating the different trade-offs and will keep you posted as we make progress.<\/p>\n<p>You can read more about our future plans in \u201c<a href=\"https:\/\/blog.angular.io\/whats-next-for-server-side-rendering-in-angular-2a6f27662b67\">What\u2019s next for server-side rendering in Angular<\/a>\u201d.<\/p>\n<h3>Improved tooling for standalone components, directives, and\u00a0pipes<\/h3>\n<p>Angular is a framework used by millions of developers for a lot of mission critical apps and we take major changes seriously. We started exploring standalone APIs <a href=\"https:\/\/github.com\/angular\/angular\/pull\/27481\">years ago<\/a>, in 2022 we released them under developer preview. Now after more than a year of collecting feedback and iterating on the APIs we\u2019d like to encourage an even wider adoption!<\/p>\n<p>To support developers transitioning their apps to standalone APIs, we developed migration schematics and a <a href=\"https:\/\/angular.io\/guide\/standalone-migration\">standalone migration guide<\/a>. Once you\u2019re in your project directory run:<\/p>\n<pre>ng generate @angular\/core:standalone<\/pre>\n<p>The schematics will convert your code, remove unnecessary NgModules classes, and finally change the bootstrap of the project to use standalone APIs.<\/p>\n<h4>Standalone ng new collection<\/h4>\n<p>As part of Angular v16 you can create new projects as standalone from the start! To try the developer preview of the standalone schematics make sure you\u2019re on Angular CLI v16 and\u00a0run:<\/p>\n<pre>ng new --standalone<\/pre>\n<p>You\u2019ll get a simpler project output without any NgModules. Additionally, all the generators in the project will produce standalone directives, components, and\u00a0pipes!<\/p>\n<h4>Configure Zone.js<\/h4>\n<p>After the initial release of the standalone APIs we heard from developers that you\u2019d like to be able to configure Zone.js with the new `bootstrapApplication` API.<\/p>\n<p>We added an option for this via provideZoneChangeDetection:<\/p>\n<pre>bootstrapApplication(App, {\r\n  providers: [provideZoneChangeDetection({ eventCoalescing: true })]\r\n});<\/pre>\n<h3>Advancing developer tooling<\/h3>\n<p>Now, let us share a few feature highlights from the Angular CLI and language\u00a0service.<\/p>\n<h4>Developer preview of the esbuild-based build\u00a0system<\/h4>\n<p>Over a year ago we announced that we\u2019re working on experimental support for esbuild in the Angular CLI to make your builds faster. Today we\u2019re excited to share that in v16 our esbuild-based build system enters developer preview! <strong>Early tests showed over 72% improvement in cold production builds.<\/strong><\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1024\/1*upgm3yDMVz8pd2jae7S71g.png\" alt=\"An image showing the logos of Vite and esbuild\" \/><figcaption>Developer preview of the esbuild-based builder<\/figcaption><\/figure>\n<p>In ng serve we\u2019re now using Vite for the development server, and esbuild powers both your development and production builds!<\/p>\n<p>We want to emphasize that Angular CLI relies on Vite exclusively as a development server. To support selector matching, the Angular compiler needs to maintain a dependency graph between your components which requires a different compilation model than\u00a0Vite.<\/p>\n<p>You can give Vite + esbuild a try by updating your angular.json:<\/p>\n<pre>...\r\n\"architect\": {\r\n  \"build\": {                     \/* Add the esbuild suffix  *\/\r\n    \"builder\": \"@angular-devkit\/build-angular:browser-esbuild\",\r\n...<\/pre>\n<p>Next we\u2019ll be tackling support for i18n before we graduate this project out of developer preview.<\/p>\n<h4>Better unit testing with Jest and Web Test\u00a0Runner<\/h4>\n<p>Based on developer surveys in the Angular and the broader JavaScript community, <a href=\"https:\/\/jestjs.io\/\">Jest<\/a> is one of the most loved testing frameworks and test runners. We\u2019ve received numerous requests to support Jest which comes with reduced complexity since no real browsers are required.<\/p>\n<p>Today, we\u2019re happy to announce that we\u2019re introducing experimental Jest support. In a future release we will also move existing <a href=\"https:\/\/karma-runner.github.io\/\">Karma<\/a> projects to <a href=\"https:\/\/modern-web.dev\/docs\/test-runner\/overview\/\">Web Test Runner<\/a> to continue supporting browser-based unit testing. This will be a no-op for the majority of developers.<\/p>\n<p>You can experiment with Jest in new projects by installing Jest with npm install jest &#8211;save-dev and updating your angular.json file:<\/p>\n<pre>{\r\n  \"projects\": {\r\n    \"my-app\": {\r\n      \"architect\": {\r\n        \"test\": {\r\n          \"builder\": \"@angular-devkit\/build-angular:jest\",\r\n          \"options\": {\r\n            \"tsConfig\": \"tsconfig.spec.json\",\r\n            \"polyfills\": [\"zone.js\", \"zone.js\/testing\"]\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}<\/pre>\n<p>You can learn more about our future unit testing strategy in our <a href=\"https:\/\/blog.angular.io\/moving-angular-cli-to-jest-and-web-test-runner-ef85ef69ceca\">recent blog\u00a0post<\/a>.<\/p>\n<h4>Autocomplete imports in templates<\/h4>\n<p>How many times do you use a component or a pipe in a template to get an error from the CLI or the language service that you\u2019ve actually not imported the corresponding implementation? I bet a ton of\u00a0times!<\/p>\n<p>The language service now allows auto-import components and\u00a0pipes.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1024\/1*exv7w0_OpfVu4v7wfnIupQ.gif\" alt=\"Gif showing the automatic import functionality of the Angular language service.\" \/><figcaption>Angular language service automatic imports<\/figcaption><\/figure>\n<p>Gif showing the auto-import functionality of the Angular language service in\u00a0VSCode<\/p>\n<h4>And there\u2019s\u00a0more!<\/h4>\n<p>In v16 we\u2019re also enabling support for TypeScript 5.0, with <a href=\"https:\/\/github.com\/angular\/angular\/pull\/49492\">support<\/a> for <a href=\"https:\/\/github.com\/tc39\/proposal-decorators\">ECMAScript decorators<\/a>, removing the overhead of ngcc, adding support for <a href=\"https:\/\/github.com\/angular\/angular-cli\/commit\/c2d2da41b15143e11f597192eef755c5e3fb4c5d\">service workers<\/a> and <a href=\"https:\/\/github.com\/angular\/angular-cli\/commit\/50b9e59a50b737e34ee12ee48ab83d17c2b8744a\">app shell<\/a> in standalone apps, expanding <a href=\"https:\/\/github.com\/angular\/angular-cli\/commit\/ff5ebf9b1244c5a01961cd3dba6bb345392aa57c\">CSP support in the CLI<\/a>, and\u00a0<a href=\"https:\/\/github.com\/angular\/angular-cli\/releases\">more<\/a>!<\/p>\n<h3>Improving Developer Experience<\/h3>\n<p>Together with the large initiatives we\u2019re focused on, we are also working towards bringing highly requested features.<\/p>\n<h4>Required inputs<\/h4>\n<p>Since we introduced Angular in 2016 it has not been possible to get a compile-time error if you don\u2019t specify a value for a specific input. The change adds zero overhead at runtime since the Angular compiler performs the check at build time. Developers <a href=\"https:\/\/github.com\/angular\/angular\/issues\/37706\">kept<\/a> <a href=\"https:\/\/github.com\/angular\/angular\/issues\/11904\">asking<\/a> <a href=\"https:\/\/github.com\/angular\/angular\/issues\/18156\">for<\/a> <a href=\"https:\/\/github.com\/angular\/angular\/issues\/24879\">this<\/a> <a href=\"https:\/\/github.com\/angular\/angular\/issues\/28403\">feature<\/a> <a href=\"https:\/\/github.com\/angular\/angular\/issues\/30974\">over<\/a> the years and we got a strong indication that this will be very\u00a0handy!<\/p>\n<p>In v16 now you can mark an input as required:<\/p>\n<pre>@Component(...)\r\nexport class App {\r\n  @Input({ required: true }) title: string = '';\r\n}<\/pre>\n<h4>Passing router data as component inputs<\/h4>\n<p>The router\u2019s developer experience has been moving forward quickly. A <a href=\"https:\/\/github.com\/angular\/angular\/issues\/18967\">popular feature request<\/a> on GitHub is asking for the ability to bind route parameters to the corresponding component\u2019s inputs. We\u2019re happy to share that this feature is now available as part of the v16\u00a0release!<\/p>\n<p>Now you can pass the following data to a routing component\u2019s inputs:<\/p>\n<ul>\n<li>Route data\u200a\u2014\u200aresolvers and data properties<\/li>\n<li>Path parameters<\/li>\n<li>Query parameters<\/li>\n<\/ul>\n<p>Here\u2019s an example of how you can access the data from a route resolver:<\/p>\n<pre>const routes = [\r\n  {\r\n    path: 'about',\r\n    loadComponent: import('.\/about'),\r\n    resolve: { contact: () =&gt; getContact() }\r\n  }\r\n];\r\n\r\n@Component(...)\r\nexport class About {\r\n  \/\/ The value of \"contact\" is passed to the contact input\r\n  @Input() contact?: string;\r\n}<\/pre>\n<h4>CSP support for inline-styles<\/h4>\n<p>Inline style elements that Angular includes in the DOM for component styles violate the default style-src <a href=\"https:\/\/angular.io\/guide\/security#content-security-policy\">Content Security Policy (CSP)<\/a>. To fix this, they should either contain a nonce attribute or the server should include a hash of the style\u2019s content in the CSP header. Even though at Google we did not find a meaningful attack vector to this vulnerability, many companies enforce strict CSP, leading to the popularity of a <a href=\"https:\/\/github.com\/angular\/angular\/issues\/6361\">feature request<\/a> on the Angular repository.<\/p>\n<p>In Angular v16, we\u2019ve implemented a new feature spanning the framework, Universal, CDK, Material, and the CLI which allows you to specify a nonce attribute for the styles of the components that Angular inlines. There are two ways to specify the nonce: using the ngCspNonce attribute or through the CSP_NONCE injection token.<\/p>\n<p>The ngCspNonce attribute is useful if you have access to server-side templating that can add the nonce both to the header and the index.html when constructing the response.<\/p>\n<pre>&lt;html&gt;\r\n&lt;body&gt;\r\n  &lt;app ngCspNonce=\"{% nonce %}\"&gt;&lt;\/app&gt;  \r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>The other way of specifying the nonce is through the CSP_NONCE injection token. Use this approach if you have access to the nonce at runtime and you want to be able to cache the index.html:<\/p>\n<pre>import {bootstrapApplication, CSP_NONCE} from '@angular\/core';\r\nimport {AppComponent} from '.\/app\/app.component';\r\n\r\nbootstrapApplication(AppComponent, {\r\n  providers: [{\r\n    provide: CSP_NONCE,\r\n    useValue: globalThis.myRandomNonceValue\r\n  }]\r\n});<\/pre>\n<h4>Flexible ngOnDestroy<\/h4>\n<p>Angular\u2019s lifecycle hooks provide a lot of power to plug into different moments of the execution of your app. An opportunity over the years has been to enable higher flexibility, for example, provide access to <a href=\"https:\/\/github.com\/angular\/angular\/issues\/10185\">OnDestroy as an observable<\/a>.<\/p>\n<p>In v16 we made OnDestroy injectable which enables the flexibility developers have been asking for. This new feature allows you to inject DestroyRef corresponding to a component, directive, service or a pipe\u200a\u2014\u200aand register the onDestroy lifecycle hook. The DestroyRef can be injected anywhere within an injection context, including outside of your component\u200a\u2014\u200ain such case the onDestroy hook is executed when a corresponding injector is destroyed.:<\/p>\n<pre>import { Injectable, DestroyRef } from '@angular\/core';\r\n\r\n@Injectable(...)\r\nexport class AppService {\r\n  destroyRef = inject(DestroyRef);\r\n\r\n  destroy() {\r\n    this.destroyRef.onDestroy(() =&gt; \/* cleanup *\/ );\r\n  }\r\n}<\/pre>\n<h4>Self-closing tags<\/h4>\n<p>A <a href=\"https:\/\/github.com\/angular\/angular\/issues\/39525\">highly requested feature<\/a> we recently implemented allows you to use self-closing tags for components in Angular templates. It\u2019s a small developer experience improvement that could save you some\u00a0typing!<\/p>\n<p>Now you can\u00a0replace:<\/p>\n<pre>&lt;super-duper-long-component-name [prop]=\"someVar\"&gt;&lt;\/super-duper-long-component-name&gt;<\/pre>\n<p>with this:<\/p>\n<pre>&lt;super-duper-long-component-name [prop]=\"someVar\"\/&gt;<\/pre>\n<h3>Better and more flexible components<\/h3>\n<p>Over the past couple of quarters we worked closely with the Material Design team at Google to provide the reference Material 3 implementation for the Web with Angular Material. The MDC Web-based components we <a href=\"https:\/\/angular.io\/guide\/roadmap#enhanced-angular-material-components-by-integrating-mdc-web\">shipped<\/a> in 2022 set the foundation for this\u00a0effort.<\/p>\n<p>As the next step, we\u2019re working towards launching later this year an expressive token-based theming API that enables higher customization of the Angular material components.<\/p>\n<p><strong>A reminder that we\u2019ll be removing the legacy, non-MDC based components in v17. Make sure you follow our <\/strong><a href=\"https:\/\/github.com\/angular\/components\/blob\/main\/guides\/v15-mdc-migration.md\"><strong>migration guide<\/strong><\/a><strong> to move to the\u00a0latest.<\/strong><\/p>\n<h4>Continuing our accessibility initiative<\/h4>\n<p>Following Google\u2019s mission, Angular lets you build web apps for everyone! That\u2019s why we\u2019re continuously investing in <a href=\"https:\/\/github.com\/angular\/components\/issues?q=is%3Aissue+label%3Aa11y+is%3Aclosed\">better accessibility<\/a> for the Angular CDK and Material components.<\/p>\n<h3>Community contribution highlights<\/h3>\n<p>Two of the features introduced by the community we want to highlight are:<\/p>\n<ul>\n<li>The <a href=\"https:\/\/github.com\/angular\/angular\/pull\/49512\">extended diagnostics<\/a> for proper use of ngSkipHydration by <a href=\"https:\/\/github.com\/JeanMeche\">Matthieu\u00a0Riegler<\/a><\/li>\n<li>The <a href=\"https:\/\/github.com\/angular\/angular\/pull\/48247\">introduction<\/a> of provideServiceWorker to enable usage of the Angular service worker without NgModules by <a href=\"https:\/\/github.com\/jsaguet\">Julien\u00a0Saguet<\/a><\/li>\n<\/ul>\n<p>Over 175 people contributed to v16 on GitHub and thousands of others contributed via blog posts, talks, podcasts, videos, comments on the reactivity RFCs,\u00a0etc.<\/p>\n<p><strong>We want to say a big thank you to everyone who helped us make this release\u00a0special.<\/strong><\/p>\n<h3>Let\u2019s keep the momentum going together!<\/h3>\n<p>Version 16 is the stepping stone for the future improvements coming to Angular\u2019s reactivity and server-side rendering over the next year. We\u2019ll be moving the Web forward by innovating in developer experience, performance, while enabling you to build for everyone!<\/p>\n<p>You can be part of the Angular Momentum and help us shape the future of the framework by sharing your thoughts in the upcoming RFCs, surveys, or social\u00a0media.<\/p>\n<p>Thank you for being part of the Angular community. We can\u2019t wait for you to try these features! \u2764\ufe0f<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/medium.com\/_\/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=4d7a28ec680d\" alt=\"\" width=\"1\" height=\"1\" \/><\/p>\n<hr \/>\n<p><a href=\"https:\/\/blog.angular.io\/angular-v16-is-here-4d7a28ec680d\">Angular v16 is here!<\/a> was originally published in <a href=\"https:\/\/blog.angular.io\/\">Angular Blog<\/a> on Medium, where people are continuing the conversation by highlighting and responding to this story.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Six months ago, we reached a significant milestone in Angular\u2019s simplicity and developer experience by graduating the standalone APIs from developer preview. Today, we\u2019re thrilled to share that we\u2019re continuing the Angular Momentum with the biggest release since the initial rollout of Angular; making large leaps in reactivity, server-side rendering, and tooling. All this comes [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7027,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11,471],"tags":[529,530,531],"class_list":["post-7016","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-web-design","tag-angular-v16","tag-angular-v16-development","tag-angular-v16-features"],"acf":{"custom_meta_title":"Angular v16 is here! Join the Angular v16\/17 Development.","meta_description":"Revamped and more powerful than ever, Angular v16 is a leading web development framework with robust features and capabilities for creating high-performance.","meta_keyword":"angular v16 features, angular v16 development, angular v16","other_meta_tag":"<meta property=og:type content=\"article\" \/>\r\n<meta property=og:title content=\"Angular v16 is here! Join the Angular v16\/17 Development.\"\/>\r\n<meta property=og:description content=\"Revamped and more powerful than ever, Angular v16 is a leading web development framework with robust features and capabilities for creating high-performance web applications. Read This Blog to Know More!!\"\/>\r\n<meta property=\"og:image\" content=\"https:\/\/www.ntspl.co.in\/blog\/wp-content\/uploads\/2023\/05\/angular.jpg\"\/>\r\n<meta property=og:url content=\"https:\/\/www.ntspl.co.in\/blog\/angular-v16-is-here\/\"\/>\r\n<meta property=og:site_name content=NTSPL \/>\r\n<meta name=\"twitter:site\" content=\"@NTSPL\">\r\n<meta name=twitter:card content=\"summary\" \/>\r\n<meta name=twitter:description content=\"Revamped and more powerful than ever, Angular v16 is a leading web development framework with robust features and capabilities for creating high-performance web applications. Read This Blog to Know More!!\"\/>\r\n<meta name=twitter:title content=\"Angular v16 is here! Join the Angular v16\/17 Development.\"\/>"},"_links":{"self":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/7016"}],"collection":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/comments?post=7016"}],"version-history":[{"count":3,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/7016\/revisions"}],"predecessor-version":[{"id":10514,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/7016\/revisions\/10514"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/media\/7027"}],"wp:attachment":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/media?parent=7016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/categories?post=7016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/tags?post=7016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}