diff --git a/projects/angular/src/data/datagrid/datagrid-if-detail.ts b/projects/angular/src/data/datagrid/datagrid-if-detail.ts index 631305e6c9..d06e66135d 100644 --- a/projects/angular/src/data/datagrid/datagrid-if-detail.ts +++ b/projects/angular/src/data/datagrid/datagrid-if-detail.ts @@ -6,6 +6,7 @@ import { Directive, + EmbeddedViewRef, EventEmitter, Input, OnDestroy, @@ -24,6 +25,7 @@ import { DetailService } from './providers/detail.service'; export class ClrIfDetail implements OnInit, OnDestroy { private subscriptions: Subscription[] = []; private skip = false; // This keeps us from resetting the input and calling the toggle twice + private embeddedViewRef: EmbeddedViewRef; @Input('clrIfDetail') set state(model: any) { @@ -57,11 +59,21 @@ export class ClrIfDetail implements OnInit, OnDestroy { private togglePanel(showPanel: boolean) { let stateChangeParams = null; - this.viewContainer.clear(); + if (showPanel === true) { - this.viewContainer.createEmbeddedView(this.templateRef, { $implicit: this.detailService.state }); + const embeddedViewContext = { $implicit: this.detailService.state }; + + if (this.embeddedViewRef) { + this.embeddedViewRef.context = embeddedViewContext; + } else { + this.embeddedViewRef = this.viewContainer.createEmbeddedView(this.templateRef, embeddedViewContext); + } + this.skip = true; stateChangeParams = this.detailService.state; + } else { + this.viewContainer.clear(); + this.embeddedViewRef = null; } this.stateChange.emit(stateChangeParams);