When subscribing to observables (especially in our components) we have to unsubscribe on destroy to prevent any memory leaks in our application.<\/p>\n\n\n\n
There are several options to accomplish this. Now Angular v.16 offers us another (and better) alternative.<\/p>\n\n\n\n
Previous methods of unsubscribing from subscriptions added a lot of boilerplate to our classes, which reduced readability. For example, consider the following subscription that needs to be safely handled:<\/p>\n\n\n\n
export class Component implements OnInit {\n data;\n\n ngOnInit(): void {\n this.service.getData().subscribe(\n\t response => this.data = response.\n )\n }\n}<\/code><\/pre>\n\n\n\nWe could use takeUntil<\/code> operator with additional subject<\/code>:<\/p>\n\n\n\nexport class Component implements OnInit, OnDestroy {\n data;\n destroyed = new Subject()\n\n ngOnInit(): void {\n this.service.getData()\n .pipe(\n takeUntil(this.destroyed),\n )\n .subscribe(\n response => this.data = response\n )\n }\n\n ngOnDestroy(): void {\n this.destroyed.next();\n this.destroyed.complete();\n }\n}<\/code><\/pre>\n\n\n\nBut as long as we are calling the subscribe<\/code> in the component\u2019s class we will end up with many boilerplate code.<\/p>\n\n\n\nInjectable OnDestroy<\/span><\/h4>\n\n\n\nAngular 16 introduced a flexible ngOnDestroy<\/code>, which makes the OnDestroy<\/code> hook injectable.<\/p>\n\n\n\ndestroyRef = inject(DestroyRef);<\/code><\/pre>\n\n\n\nThis allows us to inject it into our components instead of using it as a method. As a result, we can modify our takeUntil<\/code>example to something like this:<\/p>\n\n\n\nexport class Component implements OnInit {\n destroyRef = inject(DestroyRef);\n\n ngOnInit(): void {\n const destroyed = new Subject();\n\n this.destroyRef.onDestroy(() => {\n destroyed.next();\n destroyed.complete();\n });\n\n this.service.getData()\n .pipe(takeUntil(destroyed))\n .subscribe(response => this.data = response)\n }\n}<\/code><\/pre>\n\n\n\nThis basically means that we don’t need to implement the ngOnDestroy<\/code> method in our component. All the “additional” code can be wrapped within a pipe-able operator, which is what happened<\/em>.<\/p>\n\n\n\nSpecial case<\/h4>\n\n\n\n
In some cases, we may want to react to the destroy event of another component. For example, consider a scenario where a parent component has a subscription that needs to remain active as long as the child component is on the screen. In this case, we can inject DestroyRef<\/code> in the child component:<\/p>\n\n\n\nexport class Child {\n destroyRef = inject(DestroyRef);\n}<\/code><\/pre>\n\n\n\nWe can use the new takeUntilDestroyed operator in the parent component to close the subscription by passing the reference to the DestroyRef<\/code> of the child component. Here is an example implementation for the parent component:<\/p>\n\n\n\nexport class Parent {\n @ViewChild(Child) child: Child;\n\n ngOnInit(): void {\n interval(1000)\n .pipe(takeUntilDestroyed(this.child.destroyRef))\n .subscribe((count) => console.log(count));\n }\n}<\/code><\/pre>\n\n\n\nThe count will be logged to the console as long as the Child<\/code> component exists. Upon its destruction, the subscription in the Parent<\/code> will be stopped.<\/p>\n\n\n\n<\/div>\n\n\n\ntakeUntilDestroy<\/span><\/h4>\n\n\n\nA new operator which comes into play in Angular 16 \u2014 the takeUntilDestroy<\/code>. This pipe-able operator functions similarly to the example above with takeUntil(this.destroyed)<\/code>, but with almost zero additional code required!<\/p>\n\n\n\nWe Just have to add it to the pipe without passing anything, and it will automatically pick up the right OnDestroy<\/code> for the current context \u2014 using injectable OnDestroy.<\/p>\n\n\n\nimport { takeUntilDestroyed } from '@angular\/core\/rxjs-interop';\n\nexport class Component implements OnInit{\n data;\n\n constructor(private service: DataService) {\n this.service.getData()\n .pipe(takeUntilDestroyed())\n .subscribe(response => this.data = response)\n }\n}<\/code><\/pre>\n\n\n\nThat is all!<\/p>\n\n\n\n