feat(cdk-experimental/combobox): set up lazy loading

Author: wagnermaciel

src/cdk-experimental/combobox/BUILD.bazel

@@ -10,5 +10,6 @@ ng_project(
     ),
     deps = [
         "//:node_modules/@angular/core",
+        "//src/cdk-experimental/deferred-content",
     ],
 )

src/cdk-experimental/combobox/combobox.ts

@@ -6,19 +6,50 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Directive, input} from '@angular/core';
+import {contentChild, Directive, inject} from '@angular/core';
+import {DeferredContent, DeferredContentAware} from '@angular/cdk-experimental/deferred-content';
+
+@Directive({
+  selector: '[cdkCombobox]',
+  exportAs: 'cdkCombobox',
+  hostDirectives: [
+    {
+      directive: DeferredContentAware,
+      inputs: ['preserveContent'],
+    },
+  ],
+})
+export class CdkCombobox {
+  /** The DeferredContentAware host directive. */
+  private readonly _deferredContentAware = inject(DeferredContentAware, {optional: true});
+
+  /** The combobox popup. */
+  readonly popup = contentChild(CdkComboboxPopup);
+
+  constructor() {
+    this._deferredContentAware?.contentVisible.set(true);
+  }
+}
 
 @Directive({
   selector: 'input[cdkComboboxInput]',
   exportAs: 'cdkComboboxInput',
   host: {'role': 'combobox'},
 })
-export class CdkComboboxInput {
-  readonly popup = input.required<CdkComboboxPopup>();
-}
+export class CdkComboboxInput {}
+
+@Directive({
+  selector: 'ng-template[cdkComboboxPopupContent]',
+  exportAs: 'cdkComboboxPopupContent',
+  hostDirectives: [DeferredContent],
+})
+export class CdkComboboxPopupContent {}
 
 @Directive({
   selector: '[cdkComboboxPopup]',
   exportAs: 'cdkComboboxPopup',
 })
-export class CdkComboboxPopup {}
+export class CdkComboboxPopup {
+  /** The combobox that the popup belongs to. */
+  readonly combobox = inject(CdkCombobox, {optional: true});
+}

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

@@ -6,4 +6,4 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-export {CdkComboboxInput, CdkComboboxPopup} from './combobox';
+export {CdkCombobox, CdkComboboxInput, CdkComboboxPopup, CdkComboboxPopupContent} from './combobox';

src/cdk-experimental/listbox/BUILD.bazel

@@ -10,6 +10,7 @@ ng_project(
     ),
     deps = [
         "//:node_modules/@angular/core",
+        "//src/cdk-experimental/combobox",
         "//src/cdk-experimental/ui-patterns",
         "//src/cdk/a11y",
         "//src/cdk/bidi",

src/cdk-experimental/listbox/listbox.ts

@@ -22,6 +22,7 @@ import {ListboxPattern, OptionPattern} from '../ui-patterns';
 import {Directionality} from '@angular/cdk/bidi';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {_IdGenerator} from '@angular/cdk/a11y';
+import {CdkComboboxPopup} from '../combobox';
 
 /**
  * A listbox container.
@@ -53,8 +54,11 @@ import {_IdGenerator} from '@angular/cdk/a11y';
     '(pointerdown)': 'pattern.onPointerdown($event)',
     '(focusin)': 'onFocus()',
   },
+  hostDirectives: [{directive: CdkComboboxPopup}],
 })
 export class CdkListbox<V> {
+  private readonly _popup = inject(CdkComboboxPopup, {optional: true});
+
   /** A reference to the listbox element. */
   private readonly _elementRef = inject(ElementRef);
 
@@ -109,6 +113,7 @@ export class CdkListbox<V> {
     activeItem: signal(undefined),
     textDirection: this.textDirection,
     element: () => this._elementRef.nativeElement,
+    isComboboxPopup: () => !!this._popup?.combobox,
   });
 
   /** Whether the listbox has received focus yet. */

src/cdk-experimental/ui-patterns/listbox/listbox.ts

@@ -15,6 +15,9 @@ import {List, ListInputs} from '../behaviors/list/list';
 /** Represents the required inputs for a listbox. */
 export type ListboxInputs<V> = ListInputs<OptionPattern<V>, V> & {
   readonly: SignalLike<boolean>;
+
+  /** Whether the listbox is in a combobox popup. */
+  isComboboxPopup: SignalLike<boolean>;
 };
 
 /** Controls the state of a listbox. */
@@ -215,13 +218,13 @@ export class ListboxPattern<V> {
 
   /** Handles keydown events for the listbox. */
   onKeydown(event: KeyboardEvent) {
-    if (!this.disabled()) {
+    if (!this.disabled() && !this.inputs.isComboboxPopup()) {
       this.keydown().handle(event);
     }
   }
 
   onPointerdown(event: PointerEvent) {
-    if (!this.disabled()) {
+    if (!this.disabled() && !this.inputs.isComboboxPopup()) {
       this.pointerdown().handle(event);
     }
   }
@@ -237,6 +240,10 @@ export class ListboxPattern<V> {
    * is called.
    */
   setDefaultState() {
+    if (this.inputs.isComboboxPopup()) {
+      return;
+    }
+
     let firstItem: OptionPattern<V> | null = null;
 
     for (const item of this.inputs.items()) {

src/dev-app/cdk-experimental-combobox/cdk-combobox-demo.html

@@ -1,15 +1,10 @@
-<div class="example-combobox-container">
+<div cdkCombobox class="example-combobox-container">
   <div class="example-combobox-input-container">
     <span class="material-symbols-outlined example-icon example-search-icon">search</span>
-    <input
-      cdkComboboxInput
-      class="example-combobox-input"
-      [popup]="popup"
-      placeholder="Search..."
-    />
+    <input cdkComboboxInput class="example-combobox-input" placeholder="Search..." />
   </div>
 
-  <div cdkComboboxPopup #popup="cdkComboboxPopup">
+  <ng-template cdkComboboxPopupContent>
     <div cdkListbox class="example-listbox" [value]="['Apple']">
       @for (fruit of fruits; track fruit) {
         <div
@@ -27,5 +22,5 @@
         </div>
       }
     </div>
-  </div>
+  </ng-template>
 </div>

src/dev-app/cdk-experimental-combobox/cdk-combobox-demo.ts

@@ -6,14 +6,26 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CdkComboboxInput, CdkComboboxPopup} from '@angular/cdk-experimental/combobox';
+import {
+  CdkCombobox,
+  CdkComboboxInput,
+  CdkComboboxPopup,
+  CdkComboboxPopupContent,
+} from '@angular/cdk-experimental/combobox';
 import {CdkListbox, CdkOption} from '@angular/cdk-experimental/listbox';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 
 @Component({
   templateUrl: 'cdk-combobox-demo.html',
   styleUrl: 'cdk-combobox-demo.css',
-  imports: [CdkComboboxInput, CdkComboboxPopup, CdkListbox, CdkOption],
+  imports: [
+    CdkCombobox,
+    CdkComboboxInput,
+    CdkComboboxPopup,
+    CdkComboboxPopupContent,
+    CdkListbox,
+    CdkOption,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CdkComboboxDemo {