fix: Allow users to pass in templates in tabs to allow onDestroy hook to be called for content

Signed-off-by: Akshat Patel <[email protected]>

Author: Akshat55

src/tabs/tab.component.ts

@@ -63,8 +63,12 @@ import {
 			[ngStyle]="{'display': active ? null : 'none'}"
 			[attr.aria-labelledby]="id + '-header'"
 			aria-live="polite">
-			<ng-content></ng-content>
+			<ng-template *ngIf="isTemplate(tabContent); else projectedContent" [ngTemplateOutlet]="tabContent"></ng-template>
 		</div>
+		<ng-template #projectedContent>
+			<ng-content></ng-content>
+		</ng-template>
+
 	`
 })
 export class Tab implements OnInit {
@@ -111,6 +115,9 @@ export class Tab implements OnInit {
 	@Input() set cacheActive(shouldCache: boolean) {
 		this._cacheActive = shouldCache;
 	}
+
+	@Input() tabContent: TemplateRef<any>;
+
 	/**
 	 * Value 'selected' to be emitted after a new `Tab` is selected.
 	 */
@@ -150,4 +157,8 @@ export class Tab implements OnInit {
 	shouldRender() {
 		return this.active || this.cacheActive;
 	}
+
+	public isTemplate(value) {
+		return value instanceof TemplateRef;
+	}
 }

src/tabs/tabs.stories.ts

@@ -27,11 +27,24 @@ const Template = (args) => ({
 			[followFocus]="followFocus"
 			[isNavigation]="isNavigation"
 			[cacheActive]="cacheActive">
-			<cds-tab heading="one">Tab Content 1</cds-tab>
-			<cds-tab heading="two">Tab Content 2</cds-tab>
-			<cds-tab heading="three">Tab Content 3</cds-tab>
+			<cds-tab heading="one" [tabContent]="one"></cds-tab>
+			<cds-tab heading="two" [tabContent]="two"></cds-tab>
+			<cds-tab heading="three" [tabContent]="three"></cds-tab>
 			<cds-tab heading="three">Tab Content 3</cds-tab>
 		</cds-tabs>
+
+
+		<ng-template #one>
+			Tab Content 1
+		</ng-template>
+
+		<ng-template #two>
+			Tab Content 2
+		</ng-template>
+
+		<ng-template #three>
+			Tab Content 3
+		</ng-template>
 	`
 });
 export const Basic = Template.bind({});