refactor(tabs): safe tabServiceSubscription?.unsubscribe()

Author: xidedix

projects/coreui-angular/src/lib/tabs/tab-content-ref.directive.ts

@@ -6,24 +6,25 @@ import {
   Input,
   OnChanges,
   OnDestroy,
-  OnInit,
   SimpleChanges
 } from '@angular/core';
-import { Subscription } from 'rxjs';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Subscription } from 'rxjs';
 
 import { TabService } from './tab.service';
 
 @Directive({
   selector: '[cTabContent]',
   standalone: true
 })
-export class TabContentRefDirective implements OnChanges, OnDestroy, OnInit {
+export class TabContentRefDirective implements OnChanges, OnDestroy {
 
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private tabService: TabService
-  ) { }
+  ) {
+    this.subscribeTabService();
+  }
 
   static ngAcceptInputType_disabled: BooleanInput;
   private tabServiceSubscription!: Subscription;
@@ -46,9 +47,11 @@ export class TabContentRefDirective implements OnChanges, OnDestroy, OnInit {
       this.changeDetectorRef.detectChanges();
     }
   }
+
   get active() {
     return this._active;
   }
+
   private _active = false;
 
   /**
@@ -59,9 +62,11 @@ export class TabContentRefDirective implements OnChanges, OnDestroy, OnInit {
   set disabled(value: boolean) {
     this._disabled = coerceBooleanProperty(value);
   }
+
   get disabled(): boolean {
     return this._disabled || this.tabPaneIdx >= this.tabContentRef?.panes?.length;
   }
+
   private _disabled = false;
 
   /**
@@ -116,10 +121,6 @@ export class TabContentRefDirective implements OnChanges, OnDestroy, OnInit {
     });
   }
 
-  ngOnInit(): void {
-    this.subscribeTabService();
-  }
-
   ngOnDestroy(): void {
     this.subscribeTabService(false);
   }
@@ -132,7 +133,7 @@ export class TabContentRefDirective implements OnChanges, OnDestroy, OnInit {
         }
       });
     } else {
-      this.tabServiceSubscription.unsubscribe();
+      this.tabServiceSubscription?.unsubscribe();
     }
   }
 }

projects/coreui-angular/src/lib/tabs/tab-content/tab-content.component.ts

@@ -100,7 +100,7 @@ export class TabContentComponent implements AfterContentChecked, AfterContentIni
         }
       });
     } else {
-      this.tabServiceSubscription.unsubscribe();
+      this.tabServiceSubscription?.unsubscribe();
     }
   }
 

projects/coreui-angular/src/lib/tabs/tab-pane/tab-pane.component.ts

@@ -1,23 +1,26 @@
-import { ChangeDetectorRef, Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, HostBinding, OnDestroy } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Subscription } from 'rxjs';
 
 import { TabContentComponent } from '../tab-content/tab-content.component';
 import { ITabContentState, TabService } from '../tab.service';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 @Component({
   selector: 'c-tab-pane',
-  template: `<ng-content></ng-content>`,
+  template: `
+    <ng-content></ng-content>`,
   styleUrls: ['./tab-pane.component.scss'],
   exportAs: 'cTabPane',
   standalone: true
 })
-export class TabPaneComponent implements OnDestroy, OnInit {
+export class TabPaneComponent implements OnDestroy {
 
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private tabService: TabService
-  ) { }
+  ) {
+    this.subscribeTabService();
+  }
 
   public tabPaneIdx!: number;
   public tabContent!: TabContentComponent;
@@ -30,9 +33,11 @@ export class TabPaneComponent implements OnDestroy, OnInit {
       this.changeDetectorRef.markForCheck();
     }
   }
+
   get active(): boolean {
     return this._active;
   }
+
   private _active: boolean = false;
 
   @HostBinding('class')
@@ -45,10 +50,6 @@ export class TabPaneComponent implements OnDestroy, OnInit {
     };
   }
 
-  ngOnInit(): void {
-    this.subscribeTabService();
-  }
-
   ngOnDestroy(): void {
     this.subscribeTabService(false);
   }
@@ -61,7 +62,7 @@ export class TabPaneComponent implements OnDestroy, OnInit {
         }
       });
     } else {
-      this.tabServiceSubscription.unsubscribe();
+      this.tabServiceSubscription?.unsubscribe();
     }
   }
 }