Merge pull request #2910 from Akshat55/tab-template-projection

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

Author: zvonimirfras

src/tabs/tab.component.ts

@@ -63,6 +63,11 @@ import {
 			[ngStyle]="{'display': active ? null : 'none'}"
 			[attr.aria-labelledby]="id + '-header'"
 			aria-live="polite">
+			<ng-template
+				*ngIf="isTemplate(tabContent)"
+				[ngTemplateOutlet]="tabContent"
+				[ngTemplateOutletContext]="{ $implicit: templateContext }">
+			</ng-template>
 			<ng-content></ng-content>
 		</div>
 	`
@@ -111,11 +116,18 @@ export class Tab implements OnInit {
 	@Input() set cacheActive(shouldCache: boolean) {
 		this._cacheActive = shouldCache;
 	}
+	/**
+	 * Allows life cycle hooks to be called on the rendered content
+	 */
+	@Input() tabContent: TemplateRef<any>;
+	/**
+	 * Optional data for templates passed as implicit context
+	 */
+	@Input() templateContext: any;
 	/**
 	 * Value 'selected' to be emitted after a new `Tab` is selected.
 	 */
 	@Output() selected: EventEmitter<void> = new EventEmitter<void>();
-
 	/**
 	 * Used to set the id property on the element.
 	 */
@@ -150,4 +162,8 @@ export class Tab implements OnInit {
 	shouldRender() {
 		return this.active || this.cacheActive;
 	}
+
+	public isTemplate(value) {
+		return value instanceof TemplateRef;
+	}
 }

src/tabs/tabs.stories.ts

@@ -29,9 +29,18 @@ const Template = (args) => ({
 			[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="three">Tab Content 3</cds-tab>
+			<cds-tab heading="three" [tabContent]="three"></cds-tab>
+			<cds-tab heading="four" [tabContent]="four"></cds-tab>
 		</cds-tabs>
+
+		<!-- Use templates if you would like to have lifecycle hooks called when cacheActive is false -->
+		<ng-template #three>
+			Tab Content 3
+		</ng-template>
+
+		<ng-template #four>
+			Tab Content 4
+		</ng-template>
 	`
 });
 export const Basic = Template.bind({});