Angular ViewChild and ComponentFactoryResolver - keep state alive

Question

I have created an interface of tabs using the dynamic component approach described here: https://angular.io/guide/dynamic-component-loader.

My question is - how do you maintain state of one component while it is hidden?

I add some code in support

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[tabs]'
})
export class TabsDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }

}

Template

<div id="tabContent" class="tabContent padded24">
  <ng-template tabs></ng-template>
</div>

Component

@Component({
  selector: 'my-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css']
})
export class TabsComponent implements OnInit, OnDestroy {

  //Empty array to store list of possible tabs. A variable to store the current tab. A Viewchild to render the appropiate Tab content
  public tabs = []
  currentTab;
  @ViewChild(TabsDirective) Tab: TabsDirective;

  constructor(
    private _tabsService: TabsService,
    private componentFactoryResolver: ComponentFactoryResolver,
  ) { }

  ngOnInit() {
    this.tabs = this._tabsService.getTabItems();
    this.currentTab = this.tabs[0]
  }
  onSelect(tab) {
    this.router.navigate(['/admin', tab.id])
  }
  //Load appropiate tab content depending on select tab 
  loadComponent() {
    var result = this.tabs.filter((obj) => {
      return obj.id == this.currentTab;
    });
    let tabItem = result[0];
    let componentFactory =  this.componentFactoryResolver.resolveComponentFactory(tabItem.component);  
    let viewContainerRef = this.Tab.viewContainerRef;
    viewContainerRef.clear();
    let componentRef = viewContainerRef.createComponent(componentFactory);
  }
}

yes. data. I remember reading that it could be done and now I need to find out how to do it. — Joey Gough, Jul 16 '18 at 17:45
You could add a service to retain the desired state. Or use a library such as NgRx to manage your state. — DeborahK, Jul 16 '18 at 20:01

score 0 · Answer 1 · answered Jul 16 '18 at 18:15

If you want to add text in dynamically created component

loadComponent() {
    var result = this.tabs.filter((obj) => {
      return obj.id == this.currentTab;
    });
    let tabItem = result[0];
    let componentFactory =  this.componentFactoryResolver.resolveComponentFactory(tabItem.component);  
    let viewContainerRef = this.Tab.viewContainerRef;
    viewContainerRef.clear();
    let componentRef = viewContainerRef.createComponent(componentFactory);
    componentRef .instance.text = 'Iam dynamically created Text';

  }

for more info check this: Angular 2 dynamic tabs with user-click chosen components

Angular ViewChild and ComponentFactoryResolver - keep state alive

1 Answers1