Added lazy/deferred content directives to be used in collapsible

patterns

Author: ok7sai

src/cdk-experimental/deferred-content/BUILD.bazel

@@ -0,0 +1,31 @@
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "deferred-content",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    deps = [
+        "@npm//@angular/core",
+    ],
+)
+
+ng_test_library(
+    name = "unit_test_sources",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["**/*.e2e.spec.ts"],
+    ),
+    deps = [
+        ":deferred-content",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_test_sources"],
+)

src/cdk-experimental/deferred-content/deferred-content.spec.ts

@@ -0,0 +1,87 @@
+import {Component, DebugElement, Directive, effect, inject, signal} from '@angular/core';
+import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {DeferredContent, DeferredContentAware} from './deferred-content';
+import {By} from '@angular/platform-browser';
+
+describe('DeferredContent', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let collapsible: DebugElement;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [TestComponent],
+    });
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestComponent);
+    collapsible = fixture.debugElement.query(By.directive(Collapsible));
+  });
+
+  it('removes the content when hidden.', async () => {
+    collapsible.injector.get(Collapsible).contentVisible.set(false);
+    await fixture.whenStable();
+    expect(collapsible.nativeElement.innerText).toBe('');
+  });
+
+  it('creates the content when visible.', async () => {
+    collapsible.injector.get(Collapsible).contentVisible.set(true);
+    await fixture.whenStable();
+    expect(collapsible.nativeElement.innerText).toBe('Lazy Content');
+  });
+
+  describe('with preserveContent', () => {
+    let component: TestComponent;
+
+    beforeEach(() => {
+      component = fixture.componentInstance;
+      component.preserveContent.set(true);
+    });
+
+    it('creates the content when hidden.', async () => {
+      collapsible.injector.get(Collapsible).contentVisible.set(false);
+      await fixture.whenStable();
+      expect(collapsible.nativeElement.innerText).toBe('Lazy Content');
+    });
+
+    it('creates the content when visible.', async () => {
+      collapsible.injector.get(Collapsible).contentVisible.set(true);
+      await fixture.whenStable();
+      expect(collapsible.nativeElement.innerText).toBe('Lazy Content');
+    });
+  });
+});
+
+@Directive({
+  selector: '[collapsible]',
+  hostDirectives: [{directive: DeferredContentAware, inputs: ['preserveContent']}],
+})
+class Collapsible {
+  private readonly _deferredContentAware = inject(DeferredContentAware);
+
+  contentVisible = signal(true);
+
+  constructor() {
+    effect(() => this._deferredContentAware.contentVisible.set(this.contentVisible()));
+  }
+}
+
+@Directive({
+  selector: 'ng-template[collapsibleContent]',
+  hostDirectives: [DeferredContent],
+})
+class CollapsibleContent {}
+
+@Component({
+  template: `
+    <div collapsible [preserveContent]="preserveContent()">
+      <ng-template collapsibleContent>
+        Lazy Content
+      </ng-template>
+    </div>
+    `,
+  imports: [Collapsible, CollapsibleContent],
+})
+class TestComponent {
+  preserveContent = signal(false);
+}

src/cdk-experimental/deferred-content/deferred-content.ts

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {
+  computed,
+  Directive,
+  effect,
+  inject,
+  input,
+  TemplateRef,
+  signal,
+  ViewContainerRef,
+} from '@angular/core';
+
+/**
+ * A container directive controls the visibility of its content.
+ */
+@Directive()
+export class DeferredContentAware {
+  contentVisible = signal(false);
+  readonly preserveContent = input(false);
+}
+
+/**
+ * DeferredContent loads/unloads the content based on the visibility.
+ * The visibilty signal is sent from a parent directive implements
+ * DeferredContentAware.
+ *
+ * Use this directive as a host directive. For example:
+ *
+ * ```ts
+ *   @Directive({
+ *     selector: 'ng-template[cdkAccordionContent]',
+ *     hostDirectives: [DeferredContent],
+ *   })
+ *   class CdkAccordionContent {}
+ * ```
+ */
+@Directive()
+export class DeferredContent {
+  private readonly _deferredContentAware = inject(DeferredContentAware);
+  private readonly _templateRef = inject(TemplateRef);
+  private readonly _viewContainerRef = inject(ViewContainerRef);
+  private _isRendered = false;
+
+  constructor() {
+    effect(() => {
+      if (
+        this._deferredContentAware.preserveContent() ||
+        this._deferredContentAware.contentVisible()
+      ) {
+        if (this._isRendered) return;
+        this._viewContainerRef.clear();
+        this._viewContainerRef.createEmbeddedView(this._templateRef);
+        this._isRendered = true;
+      } else {
+        this._viewContainerRef.clear();
+        this._isRendered = false;
+      }
+    });
+  }
+}

src/cdk-experimental/deferred-content/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+export * from './public-api';

src/cdk-experimental/deferred-content/public-api.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+export {DeferredContentAware, DeferredContent} from './deferred-content';

src/cdk-experimental/tabs/BUILD.bazel

@@ -9,6 +9,7 @@ ng_module(
         exclude = ["**/*.spec.ts"],
     ),
     deps = [
+        "//src/cdk-experimental/deferred-content",
         "//src/cdk-experimental/ui-patterns/tabs",
         "//src/cdk/a11y",
         "//src/cdk/bidi",

src/cdk-experimental/tabs/public-api.ts

@@ -6,4 +6,4 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-export {CdkTabs, CdkTablist, CdkTab, CdkTabpanel} from './tabs';
+export {CdkTabs, CdkTablist, CdkTab, CdkTabpanel, CdkTabcontent} from './tabs';

src/cdk-experimental/tabs/tabs.ts

@@ -11,12 +11,14 @@ import {
   computed,
   contentChildren,
   Directive,
+  effect,
   ElementRef,
   inject,
   input,
   model,
 } from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
+import {DeferredContent, DeferredContentAware} from '@angular/cdk-experimental/deferred-content';
 import {TabPattern} from '@angular/cdk-experimental/ui-patterns/tabs/tab';
 import {TablistPattern} from '@angular/cdk-experimental/ui-patterns/tabs/tablist';
 import {TabpanelPattern} from '@angular/cdk-experimental/ui-patterns/tabs/tabpanel';
@@ -189,12 +191,22 @@ export class CdkTab {
   exportAs: 'cdkTabpanel',
   host: {
     'role': 'tabpanel',
+    'tabindex': '0',
     'class': 'cdk-tabpanel',
     '[attr.id]': 'pattern.id()',
     '[attr.inert]': 'pattern.hidden() ? true : null',
   },
+  hostDirectives: [
+    {
+      directive: DeferredContentAware,
+      inputs: ['preserveContent'],
+    },
+  ],
 })
 export class CdkTabpanel {
+  /** The DeferredContentAware host directive. */
+  private readonly _deferredContentAware = inject(DeferredContentAware);
+
   /** The parent CdkTabs. */
   private readonly _cdkTabs = inject(CdkTabs);
 
@@ -215,4 +227,18 @@ export class CdkTabpanel {
     id: () => this._id,
     tab: this.tab,
   });
+
+  constructor() {
+    effect(() => this._deferredContentAware.contentVisible.set(!this.pattern.hidden()));
+  }
 }
+
+/**
+ * A Tabcontent container for the lazy-loaded content.
+ */
+@Directive({
+  selector: 'ng-template[cdkTabcontent]',
+  exportAs: 'cdTabcontent',
+  hostDirectives: [DeferredContent],
+})
+export class CdkTabcontent {}

src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.html

@@ -45,8 +45,14 @@
     <li cdkTab class="example-tab">tab 3</li>
   </ul>
 
-  <div cdkTabpanel class="example-tabpanel">Tabpanel 1</div>
-  <div cdkTabpanel class="example-tabpanel">Tabpanel 2</div>
-  <div cdkTabpanel class="example-tabpanel">Tabpanel 3</div>
+  <div cdkTabpanel class="example-tabpanel">
+    <ng-template cdkTabcontent>Tabpanel 1</ng-template>
+  </div>
+  <div cdkTabpanel class="example-tabpanel">
+    <ng-template cdkTabcontent>Tabpanel 2</ng-template>
+  </div>
+  <div cdkTabpanel class="example-tabpanel">
+    <ng-template cdkTabcontent>Tabpanel 3</ng-template>
+  </div>
 </div>
 <!-- #enddocregion tabs -->

src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.ts

@@ -1,6 +1,12 @@
 import {Component} from '@angular/core';
 import {MatCheckboxModule} from '@angular/material/checkbox';
-import {CdkTabs, CdkTablist, CdkTab, CdkTabpanel} from '@angular/cdk-experimental/tabs';
+import {
+  CdkTabs,
+  CdkTablist,
+  CdkTab,
+  CdkTabpanel,
+  CdkTabcontent,
+} from '@angular/cdk-experimental/tabs';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatSelectModule} from '@angular/material/select';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
@@ -16,6 +22,7 @@ import {FormControl, ReactiveFormsModule} from '@angular/forms';
     CdkTablist,
     CdkTab,
     CdkTabpanel,
+    CdkTabcontent,
     MatCheckboxModule,
     MatFormFieldModule,
     MatSelectModule,