feat(accordion): add lazy load to accordion item

src/accordion/accordion-item/accordion-item.component.html

@@ -22,6 +22,7 @@
   <div class="aui-accordion-item__content" role="region" [id]="id">
     <div class="aui-accordion-item__content-body" [hidden]="!expanded">
       <ng-content></ng-content>
+      <ng-template [ngTemplateOutlet]="lazyContentTpl"></ng-template>
     </div>
   </div>
 </div>

src/accordion/accordion-item/accordion-item.component.ts

@@ -1,22 +1,30 @@
 import { CdkAccordionItem } from '@angular/cdk/accordion';
 import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
 import {
+  AfterContentInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  ContentChild,
   Directive,
   EventEmitter,
   Input,
   Output,
+  TemplateRef,
   ViewEncapsulation,
 } from '@angular/core';
+import { filter, startWith, take } from 'rxjs/operators';
 
 import { AccordionComponent } from '../accordion.component';
 
 @Directive({
   selector: '[auiAccordionItemHeader]',
 })
 export class AccordionItemHeaderDirective {}
+@Directive({
+  selector: '[auiAccordionContent]',
+})
+export class AccordionItemContentDirective {}
 @Component({
   selector: 'aui-accordion-item',
   templateUrl: 'accordion-item.component.html',
@@ -26,7 +34,8 @@ export class AccordionItemHeaderDirective {}
   preserveWhitespaces: false,
   viewProviders: [AccordionItemComponent],
 })
-export class AccordionItemComponent extends CdkAccordionItem {
+export class AccordionItemComponent extends CdkAccordionItem
+  implements AfterContentInit {
   @Input()
   hideToggle: false;
 
@@ -36,6 +45,14 @@ export class AccordionItemComponent extends CdkAccordionItem {
   @Output()
   expandedChange = new EventEmitter<boolean>();
 
+  @ContentChild(AccordionItemContentDirective, {
+    read: TemplateRef,
+    static: true,
+  })
+  _lazyContentTpl: TemplateRef<unknown>;
+
+  lazyContentTpl: TemplateRef<unknown>;
+
   // eslint-disable-next-line @typescript-eslint/no-useless-constructor
   constructor(
     accordion: AccordionComponent,
@@ -45,6 +62,21 @@ export class AccordionItemComponent extends CdkAccordionItem {
     super(accordion, cdr, uniqueSelectionDispatcher);
   }
 
+  ngAfterContentInit() {
+    if (this._lazyContentTpl) {
+      // Render the content as soon as the accordion becomes open.
+      this.opened
+        .pipe(
+          startWith(null!),
+          filter(() => this.expanded),
+          take(1),
+        )
+        .subscribe(() => {
+          this.lazyContentTpl = this._lazyContentTpl;
+        });
+    }
+  }
+
   toggle() {
     super.toggle();
     this.expandedChange.emit(this.expanded);

src/accordion/accordion.module.ts

@@ -7,6 +7,7 @@ import { IconModule } from '../icon/public-api';
 
 import {
   AccordionItemComponent,
+  AccordionItemContentDirective,
   AccordionItemHeaderDirective,
 } from './accordion-item/accordion-item.component';
 import { AccordionComponent } from './accordion.component';
@@ -16,12 +17,14 @@ import { AccordionComponent } from './accordion.component';
     AccordionComponent,
     AccordionItemComponent,
     AccordionItemHeaderDirective,
+    AccordionItemContentDirective,
   ],
   imports: [CommonModule, CdkAccordionModule, IconModule, ButtonModule],
   exports: [
     AccordionComponent,
     AccordionItemComponent,
     AccordionItemHeaderDirective,
+    AccordionItemContentDirective,
   ],
   providers: [],
 })