0

First of all here is the Plunkr

Essentially, I have a tab control that is dynamic. There will be any number of tabs, each of which will contain a component that inherits from this 'Delay-load' component. The functionality I wish to achieve is that when a user clicks on the tab, it will then call 'loadData' from within whichever component is contained within the tab.

I have tried to access the child component with @ViewChild or @ContentChild but nothing I try seems to work.

The template of the tab is:

<div [hidden]="!active" class="pane">
  <ng-content></ng-content>
</div>

And on the setter of the property 'active' within the tab component, I wish to call the .loadData() method of whatever component is held within the element. Is this achievable?

wh-dev
  • 537
  • 5
  • 18
  • https://plnkr.co/edit/YA3WFkE1L3WJNyjspeWr?p=preview – yurzui Apr 03 '17 at 13:40
  • @yurzui this helped immensely, if you would like to submit an answer (with a small description) I will mark it as the solution! :) thank you! – wh-dev Apr 04 '17 at 08:28

1 Answers1

0

It works for me with

  ngAfterContentInit() {
    if(this.component) {
      this.component.loadData();
    }
  }

  @ContentChild(DelayLoadComponent) component: DelayLoadComponent;

but it doesn't lazy load the component.

Plunker example

Perhaps you want to add an *ngIf that only adds the component to the DOM when the tab is active.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • unfortunately I am looking to lazy load the component! – wh-dev Apr 04 '17 at 08:29
  • But the problem is not caused by lazy loading. Your application doesn't lazy load the component. – Günter Zöchbauer Apr 04 '17 at 08:30
  • But that is what I am trying to achieve by asking this question? I know it doesn't lazy load the component - that's why I am here! :) – wh-dev Apr 05 '17 at 12:56
  • Your whole question doesn't contain `lazy` once ;-) There are questions and answers how to lazy load components without the router. You can also use `*ngIf` if you only want the component to be added to the DOM when visible. Lazy loading is loading the component from a different (different from the initial application code file) from the server. – Günter Zöchbauer Apr 05 '17 at 12:59