diff --git a/src/components/layout/accordion/accordion-item/accordion-item.component.ts b/src/components/layout/accordion/accordion-item/accordion-item.component.ts
index efc24d0b..4fa13de1 100644
--- a/src/components/layout/accordion/accordion-item/accordion-item.component.ts
+++ b/src/components/layout/accordion/accordion-item/accordion-item.component.ts
@@ -1,6 +1,8 @@
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Input, Output } from '@angular/core';
+import { LazyPanelContentDirective } from '@dsh/components/layout/expand-panel/lazy-panel-content.directive';
+
import { coerce } from '../../../../utils';
import { ResizedEvent } from '../../../indicators';
import { AccordionItemContentComponent } from '../accordion-item-content';
@@ -22,6 +24,9 @@ export class AccordionItemComponent {
@ContentChild(AccordionItemContentComponent)
accordionItemContent: AccordionItemContentComponent;
+ @ContentChild(LazyPanelContentDirective)
+ lazyContent: LazyPanelContentDirective;
+
expandTrigger: { value: ExpandState; params: { height: number } } | ExpandState = ExpandState.collapsed;
collapseTrigger: { value: ExpandState; params: { height: number } } | ExpandState;
diff --git a/src/components/layout/expand-panel/expand-panel-more/expand-panel-more-template.component.html b/src/components/layout/expand-panel/expand-panel-more/expand-panel-more-template.component.html
index 34e48484..91fa86e8 100644
--- a/src/components/layout/expand-panel/expand-panel-more/expand-panel-more-template.component.html
+++ b/src/components/layout/expand-panel/expand-panel-more/expand-panel-more-template.component.html
@@ -1,6 +1,12 @@
diff --git a/src/components/layout/expand-panel/expand-panel-more/expand-panel-more-template.component.ts b/src/components/layout/expand-panel/expand-panel-more/expand-panel-more-template.component.ts
index 225127b8..33be64ea 100644
--- a/src/components/layout/expand-panel/expand-panel-more/expand-panel-more-template.component.ts
+++ b/src/components/layout/expand-panel/expand-panel-more/expand-panel-more-template.component.ts
@@ -1,6 +1,8 @@
import { Component, ContentChild, Input, TemplateRef, ViewChild } from '@angular/core';
import { Subject } from 'rxjs';
+import { LazyPanelContentDirective } from '@dsh/components/layout/expand-panel/lazy-panel-content.directive';
+
import { coerce } from '../../../../utils';
import { ExpandPanelMoreHeaderTemplateComponent } from './expand-panel-more-header-template';
@@ -23,4 +25,7 @@ export class ExpandPanelMoreTemplateComponent {
v && v.collapse$.subscribe((e) => self.collapse$.next(e))
)
expandPanelMoreHeader: ExpandPanelMoreHeaderTemplateComponent;
+
+ @ContentChild(LazyPanelContentDirective)
+ lazyContent: LazyPanelContentDirective;
}
diff --git a/src/components/layout/expand-panel/expand-panel.module.ts b/src/components/layout/expand-panel/expand-panel.module.ts
index e0b09ab1..174d9183 100644
--- a/src/components/layout/expand-panel/expand-panel.module.ts
+++ b/src/components/layout/expand-panel/expand-panel.module.ts
@@ -10,12 +10,14 @@ import { CardModule } from '../card';
import { ExpandPanelAccordionComponent } from './expand-panel-accordion.component';
import { ExpandPanelMoreHeaderTemplateComponent, ExpandPanelMoreTemplateComponent } from './expand-panel-more';
import { ExpandPanelComponent } from './expand-panel.component';
+import { LazyPanelContentDirective } from './lazy-panel-content.directive';
const EXPORTED_DECLARATIONS = [
ExpandPanelComponent,
ExpandPanelMoreTemplateComponent,
ExpandPanelMoreHeaderTemplateComponent,
ExpandPanelAccordionComponent,
+ LazyPanelContentDirective,
];
@NgModule({
diff --git a/src/components/layout/expand-panel/lazy-panel-content.directive.ts b/src/components/layout/expand-panel/lazy-panel-content.directive.ts
new file mode 100644
index 00000000..b07b82bb
--- /dev/null
+++ b/src/components/layout/expand-panel/lazy-panel-content.directive.ts
@@ -0,0 +1,8 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+ selector: 'ng-template[dshLazyPanelContent]',
+})
+export class LazyPanelContentDirective {
+ constructor(public _template: TemplateRef
) {}
+}