fix(leak): unsubscribe was not unsubscribing (#15403)

pmoleri · web-flow · commit bde20945a8a6 · 2025-02-25T14:16:03.000-03:00
diff --git a/projects/igniteui-angular/src/lib/checkbox/checkbox-base.directive.ts b/projects/igniteui-angular/src/lib/checkbox/checkbox-base.directive.ts
@@ -261,14 +261,14 @@ export class CheckboxBaseDirective implements AfterViewInit {
 
         this.theme = this.themeToken.theme;
 
-        const { unsubscribe } = this.themeToken.onChange((theme) => {
+        const themeChange = this.themeToken.onChange((theme) => {
             if (this.theme !== theme) {
                 this.theme = theme;
                 this.cdr.detectChanges();
             }
         });
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => themeChange.unsubscribe());
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/icon/icon.service.ts b/projects/igniteui-angular/src/lib/icon/icon.service.ts
@@ -64,19 +64,19 @@ export class IgxIconService {
         @Optional() private _sanitizer: DomSanitizer,
         @Optional() private _httpClient: HttpClient,
         @Optional() private _platformUtil: PlatformUtil,
-        @Optional() @Inject(THEME_TOKEN) private _themeToken: ThemeToken,
+        @Optional() @Inject(THEME_TOKEN) private _themeToken: ThemeToken | undefined,
         @Optional() @Inject(DestroyRef) private _destroyRef: DestroyRef,
         @Optional() @Inject(DOCUMENT) protected document: Document,
     ) {
 
         this.iconLoaded = this._iconLoaded.asObservable();
         this.setFamily(this._defaultFamily.name, this._defaultFamily.meta);
 
-        const { unsubscribe } = this._themeToken?.onChange((theme) => {
+        const themeChange = this._themeToken?.onChange((theme) => {
             this.setRefsByTheme(theme);
         });
 
-        this._destroyRef.onDestroy(() => unsubscribe);
+        this._destroyRef.onDestroy(() => themeChange?.unsubscribe());
 
         if (this._platformUtil?.isBrowser) {
             this._domParser = new DOMParser();
diff --git a/src/app/accordion/accordion.sample.ts b/src/app/accordion/accordion.sample.ts
@@ -40,13 +40,13 @@ export class AccordionSampleComponent {
     ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } =
+        const propertyChange =
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
                 }
             );
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 }
diff --git a/src/app/avatar/avatar.sample.ts b/src/app/avatar/avatar.sample.ts
@@ -76,13 +76,13 @@ export class AvatarSampleComponent {
     ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } =
+        const propertyChange =
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
                 }
             );
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 }
diff --git a/src/app/badge/badge.sample.ts b/src/app/badge/badge.sample.ts
@@ -67,14 +67,14 @@ export class BadgeSampleComponent {
     ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } =
+        const propertyChange =
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
                 }
             );
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 
     private variantMap = new Map<string, string>(
diff --git a/src/app/button/button.sample.ts b/src/app/button/button.sample.ts
@@ -83,14 +83,14 @@ export class ButtonSampleComponent implements OnInit {
     ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } =
+        const propertyChange =
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
                 }
             );
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 
     public ngOnInit(): void {
diff --git a/src/app/buttonGroup/buttonGroup.sample.ts b/src/app/buttonGroup/buttonGroup.sample.ts
@@ -114,14 +114,14 @@ export class ButtonGroupSampleComponent {
     ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } =
+        const propertyChange =
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
                 }
             );
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 
     private selectionMap = new Map<string, string>(
diff --git a/src/app/calendar/calendar.sample.ts b/src/app/calendar/calendar.sample.ts
@@ -153,14 +153,14 @@ export class CalendarSampleComponent implements OnInit {
     ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } =
+        const propertyChange =
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
                 }
             );
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 
     public ngOnInit(): void {
diff --git a/src/app/card/card.sample.ts b/src/app/card/card.sample.ts
@@ -162,14 +162,14 @@ export class CardSampleComponent implements OnInit {
     ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } =
+        const propertyChange =
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
                 }
             );
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 
     public ngOnInit() {
diff --git a/src/app/carousel/carousel.sample.ts b/src/app/carousel/carousel.sample.ts
@@ -134,14 +134,14 @@ export class CarouselSampleComponent {
         this.addNewSlide();
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } =
+        const propertyChange =
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
                 }
             );
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 
     private indicatorsOrientationMap = new Map<string, string>([
diff --git a/src/app/chips/chips.sample.ts b/src/app/chips/chips.sample.ts
@@ -133,14 +133,14 @@ export class ChipsSampleComponent implements OnInit {
     ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } =
+        const propertyChange =
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
                 }
             );
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 
     public ngOnInit() {
diff --git a/src/app/circular-progress-showcase/circular-progress-showcase.sample.ts b/src/app/circular-progress-showcase/circular-progress-showcase.sample.ts
@@ -92,13 +92,13 @@ export class CircularProgressSampleComponent {
     ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } =
+        const propertyChange =
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
                 }
             );
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 }
diff --git a/src/app/combo-showcase/combo-showcase.sample.ts b/src/app/combo-showcase/combo-showcase.sample.ts
@@ -126,11 +126,11 @@ export class ComboShowcaseSampleComponent {
 
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } = this.propertyChangeService.propertyChanges.subscribe(properties => {
+        const propertyChange = this.propertyChangeService.propertyChanges.subscribe(properties => {
             this.properties = properties;
         });
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 
     protected get groupSortingAngular() {
diff --git a/src/app/date-picker/date-picker.sample.ts b/src/app/date-picker/date-picker.sample.ts
@@ -152,14 +152,14 @@ export class DatePickerSampleComponent {
     ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } =
+        const propertyChange =
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
                 }
             );
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 
     protected get modeAngular() {
diff --git a/src/app/dialog/dialog.sample.ts b/src/app/dialog/dialog.sample.ts
@@ -91,14 +91,14 @@ export class DialogSampleComponent {
     ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } =
+        const propertyChange =
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
                 }
             );
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 
     protected onDialogOKSelected(args) {
diff --git a/src/app/drop-down/drop-down.sample.ts b/src/app/drop-down/drop-down.sample.ts
@@ -162,14 +162,14 @@ export class DropDownSampleComponent implements OnInit {
     ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } =
+        const propertyChange =
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
                 }
             );
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 
     public ngOnInit() {
diff --git a/src/app/expansion-panel/expansion-panel-sample.ts b/src/app/expansion-panel/expansion-panel-sample.ts
@@ -51,14 +51,14 @@ export class ExpansionPanelSampleComponent {
     ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } =
+        const propertyChange =
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
                 }
             );
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 
     private iconPositionMap = new Map<string, string>([
diff --git a/src/app/icon-button/icon-button.sample.ts b/src/app/icon-button/icon-button.sample.ts
@@ -59,13 +59,13 @@ export class IconButtonSampleComponent {
     ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } =
+        const propertyChange =
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
                 }
             );
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 }
diff --git a/src/app/input-controls/input-controls.sample.ts b/src/app/input-controls/input-controls.sample.ts
@@ -107,14 +107,14 @@ export class InputControlsSampleComponent {
     ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } =
+        const propertyChange =
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
                 }
             );
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 
     private alignmentMap = new Map<string, RadioGroupAlignment>([
diff --git a/src/app/input-group-showcase/input-group-showcase.sample.ts b/src/app/input-group-showcase/input-group-showcase.sample.ts
@@ -154,15 +154,15 @@ export class InputGroupShowcaseSampleComponent {
     constructor(private destroyRef: DestroyRef) {
         this.pcs.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } = this.pcs.propertyChanges.subscribe((updatedProperties) => {
+        const propertyChange = this.pcs.propertyChanges.subscribe((updatedProperties) => {
             const mergedProperties = this.mergeProperties(updatedProperties);
 
             this.properties.set(mergedProperties);
             this.updateFormControls();
             this.getPlaceholder();
         });
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 
     // Merge incoming property updates with the default configuration
diff --git a/src/app/linear-progress/linear-progress.sample.ts b/src/app/linear-progress/linear-progress.sample.ts
@@ -112,14 +112,14 @@ export class LinearProgressSampleComponent {
     ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } =
+        const propertyChange =
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
                 }
             );
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 
     protected get variantAngular() {
diff --git a/src/app/list/list.sample.ts b/src/app/list/list.sample.ts
@@ -155,14 +155,14 @@ export class ListSampleComponent {
     ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } =
+        const propertyChange =
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
                 }
             );
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 
     public employeeItems: Employee[] = [
diff --git a/src/app/slider-showcase/slider-showcase.sample.ts b/src/app/slider-showcase/slider-showcase.sample.ts
@@ -127,14 +127,14 @@ export class SliderShowcaseSampleComponent {
     ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } =
+        const propertyChange =
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
                 }
             );
 
-        this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 
     private ticksOrientationMap = new Map<string, TicksOrientation>(
diff --git a/src/app/snackbar-showcase/snackbar-showcase.sample.ts b/src/app/snackbar-showcase/snackbar-showcase.sample.ts
diff --git a/src/app/stepper/stepper.sample.ts b/src/app/stepper/stepper.sample.ts
diff --git a/src/app/tabs-showcase/tabs-showcase.sample.ts b/src/app/tabs-showcase/tabs-showcase.sample.ts
diff --git a/src/app/toast-showcase/toast-showcase.sample.ts b/src/app/toast-showcase/toast-showcase.sample.ts
diff --git a/src/app/tree-showcase/tree-showcase.sample.ts b/src/app/tree-showcase/tree-showcase.sample.ts

Original file line number	Diff line number	Diff line change
`@@ -261,14 +261,14 @@ export class CheckboxBaseDirective implements AfterViewInit {`
`261`	`261`
`262`	`262`	`this.theme = this.themeToken.theme;`
`263`	`263`
`264`		`- const { unsubscribe } = this.themeToken.onChange((theme) => {`
	`264`	`+ const themeChange = this.themeToken.onChange((theme) => {`
`265`	`265`	`if (this.theme !== theme) {`
`266`	`266`	`this.theme = theme;`
`267`	`267`	`this.cdr.detectChanges();`
`268`	`268`	`}`
`269`	`269`	`});`
`270`	`270`
`271`		`- this.destroyRef.onDestroy(() => unsubscribe);`
	`271`	`+ this.destroyRef.onDestroy(() => themeChange.unsubscribe());`
`272`	`272`	`}`
`273`	`273`
`274`	`274`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -40,13 +40,13 @@ export class AccordionSampleComponent {`
`40`	`40`	`) {`
`41`	`41`	`this.propertyChangeService.setPanelConfig(this.panelConfig);`
`42`	`42`
`43`		`- const { unsubscribe } =`
	`43`	`+ const propertyChange =`
`44`	`44`	`this.propertyChangeService.propertyChanges.subscribe(`
`45`	`45`	`(properties) => {`
`46`	`46`	`this.properties = properties;`
`47`	`47`	`}`
`48`	`48`	`);`
`49`	`49`
`50`		`- this.destroyRef.onDestroy(() => unsubscribe);`
	`50`	`+ this.destroyRef.onDestroy(() => propertyChange.unsubscribe());`
`51`	`51`	`}`
`52`	`52`	`}`
Original file line number	Diff line number	Diff line change
`@@ -76,13 +76,13 @@ export class AvatarSampleComponent {`
`76`	`76`	`) {`
`77`	`77`	`this.propertyChangeService.setPanelConfig(this.panelConfig);`
`78`	`78`
`79`		`- const { unsubscribe } =`
	`79`	`+ const propertyChange =`
`80`	`80`	`this.propertyChangeService.propertyChanges.subscribe(`
`81`	`81`	`(properties) => {`
`82`	`82`	`this.properties = properties;`
`83`	`83`	`}`
`84`	`84`	`);`
`85`	`85`
`86`		`- this.destroyRef.onDestroy(() => unsubscribe);`
	`86`	`+ this.destroyRef.onDestroy(() => propertyChange.unsubscribe());`
`87`	`87`	`}`
`88`	`88`	`}`
Original file line number	Diff line number	Diff line change
`@@ -67,14 +67,14 @@ export class BadgeSampleComponent {`
`67`	`67`	`) {`
`68`	`68`	`this.propertyChangeService.setPanelConfig(this.panelConfig);`
`69`	`69`
`70`		`- const { unsubscribe } =`
	`70`	`+ const propertyChange =`
`71`	`71`	`this.propertyChangeService.propertyChanges.subscribe(`
`72`	`72`	`(properties) => {`
`73`	`73`	`this.properties = properties;`
`74`	`74`	`}`
`75`	`75`	`);`
`76`	`76`
`77`		`- this.destroyRef.onDestroy(() => unsubscribe);`
	`77`	`+ this.destroyRef.onDestroy(() => propertyChange.unsubscribe());`
`78`	`78`	`}`
`79`	`79`
`80`	`80`	`private variantMap = new Map<string, string>(`
Original file line number	Diff line number	Diff line change
`@@ -83,14 +83,14 @@ export class ButtonSampleComponent implements OnInit {`
`83`	`83`	`) {`
`84`	`84`	`this.propertyChangeService.setPanelConfig(this.panelConfig);`
`85`	`85`
`86`		`- const { unsubscribe } =`
	`86`	`+ const propertyChange =`
`87`	`87`	`this.propertyChangeService.propertyChanges.subscribe(`
`88`	`88`	`(properties) => {`
`89`	`89`	`this.properties = properties;`
`90`	`90`	`}`
`91`	`91`	`);`
`92`	`92`
`93`		`- this.destroyRef.onDestroy(() => unsubscribe);`
	`93`	`+ this.destroyRef.onDestroy(() => propertyChange.unsubscribe());`
`94`	`94`	`}`
`95`	`95`
`96`	`96`	`public ngOnInit(): void {`
Original file line number	Diff line number	Diff line change
`@@ -114,14 +114,14 @@ export class ButtonGroupSampleComponent {`
`114`	`114`	`) {`
`115`	`115`	`this.propertyChangeService.setPanelConfig(this.panelConfig);`
`116`	`116`
`117`		`- const { unsubscribe } =`
	`117`	`+ const propertyChange =`
`118`	`118`	`this.propertyChangeService.propertyChanges.subscribe(`
`119`	`119`	`(properties) => {`
`120`	`120`	`this.properties = properties;`
`121`	`121`	`}`
`122`	`122`	`);`
`123`	`123`
`124`		`- this.destroyRef.onDestroy(() => unsubscribe);`
	`124`	`+ this.destroyRef.onDestroy(() => propertyChange.unsubscribe());`
`125`	`125`	`}`
`126`	`126`
`127`	`127`	`private selectionMap = new Map<string, string>(`
Original file line number	Diff line number	Diff line change
`@@ -153,14 +153,14 @@ export class CalendarSampleComponent implements OnInit {`
`153`	`153`	`) {`
`154`	`154`	`this.propertyChangeService.setPanelConfig(this.panelConfig);`
`155`	`155`
`156`		`- const { unsubscribe } =`
	`156`	`+ const propertyChange =`
`157`	`157`	`this.propertyChangeService.propertyChanges.subscribe(`
`158`	`158`	`(properties) => {`
`159`	`159`	`this.properties = properties;`
`160`	`160`	`}`
`161`	`161`	`);`
`162`	`162`
`163`		`- this.destroyRef.onDestroy(() => unsubscribe);`
	`163`	`+ this.destroyRef.onDestroy(() => propertyChange.unsubscribe());`
`164`	`164`	`}`
`165`	`165`
`166`	`166`	`public ngOnInit(): void {`
Original file line number	Diff line number	Diff line change
`@@ -162,14 +162,14 @@ export class CardSampleComponent implements OnInit {`
`162`	`162`	`) {`
`163`	`163`	`this.propertyChangeService.setPanelConfig(this.panelConfig);`
`164`	`164`
`165`		`- const { unsubscribe } =`
	`165`	`+ const propertyChange =`
`166`	`166`	`this.propertyChangeService.propertyChanges.subscribe(`
`167`	`167`	`(properties) => {`
`168`	`168`	`this.properties = properties;`
`169`	`169`	`}`
`170`	`170`	`);`
`171`	`171`
`172`		`- this.destroyRef.onDestroy(() => unsubscribe);`
	`172`	`+ this.destroyRef.onDestroy(() => propertyChange.unsubscribe());`
`173`	`173`	`}`
`174`	`174`
`175`	`175`	`public ngOnInit() {`
Original file line number	Diff line number	Diff line change
`@@ -134,14 +134,14 @@ export class CarouselSampleComponent {`
`134`	`134`	`this.addNewSlide();`
`135`	`135`	`this.propertyChangeService.setPanelConfig(this.panelConfig);`
`136`	`136`
`137`		`- const { unsubscribe } =`
	`137`	`+ const propertyChange =`
`138`	`138`	`this.propertyChangeService.propertyChanges.subscribe(`
`139`	`139`	`(properties) => {`
`140`	`140`	`this.properties = properties;`
`141`	`141`	`}`
`142`	`142`	`);`
`143`	`143`
`144`		`- this.destroyRef.onDestroy(() => unsubscribe);`
	`144`	`+ this.destroyRef.onDestroy(() => propertyChange.unsubscribe());`
`145`	`145`	`}`
`146`	`146`
`147`	`147`	`private indicatorsOrientationMap = new Map<string, string>([`