angular 4: load components one by one

Question

I'm using Ionic 3 with based on angular 4 framework. And I need to know if I have multiple children components can I load them asynchronously, one by one:

Load parent;
Load first child;
When first child loaded, load second child;
When second child loaded, load third child
and so on

For example I have a parent component app.module.ts with children:

@NgModule({
declarations: [
    AppComponentPage
],
imports: [
    IonicPageModule.forChild(AppComponentPage),
    ChildOneComponentModule,
    ChildTwoComponentModule,
    ChildThreeComponentModule,
    ChildFourComponentModule,
],
entryComponents: [
    AppComponentPage
]})
export class AppComponentPageModule {}

and app.component.ts:

import { Component } from '@angular/core';
//import all child components

@Component({
  selector: 'app-parent-component',
  template: `
      <child1-component></child1-component>
      <child2-component></child2-component>
      <child3-component></child3-component>
      <child4-component></child4-component>
  `
 })
 export class AppComponentPage {

    //HOW TO LOAD?

 }

What do you mean by "loading a component asynchronously"? Do you mean "displaying them one after the other, every N seconds"? Something else? — JB Nizet, Sep 15 '17 at 07:35
What do you want to load? What does "one by one". What knowledge do you expect to gain when loading them "one by one"? — Günter Zöchbauer, Sep 15 '17 at 07:35
@GünterZöchbauer, Ok, guys, sorry for confusing, I edited a bit my question — Merge-pony, Sep 15 '17 at 07:40
I updated my answer. Instead of `Observable.interval` you would need some way to notify the parent from the child when to add the next children. You can use a shared service for that (there are lots of answers about communication using a shared service). — Günter Zöchbauer, Sep 15 '17 at 07:45
Well I need that `ngOnInit` in first child finished work and only then I could start load next component — Merge-pony, Sep 15 '17 at 07:47

JB Nizet · Accepted Answer · 2017-09-15T09:04:09.633

In each of your child components, add an output:

@Output
initialized = new EventEmitter<boolean>();

and emit an event when you decide that the component is initialized (or loaded, as your question says), and that the next one can thus be displayed:

ngOnInit() {
  ...
  this.initialized.emit(true);
}

In the parent component, have a counter:

counter = 0;

Increment the counter every time a component is initialized, and don't display a component until the counter is allowing it to be displayed:

<child1-component (initialized)="counter++"></child1-component>
<child2-component (initialized)="counter++" *ngIf="counter > 0"></child2-component>
<child3-component (initialized)="counter++" *ngIf="counter > 1"></child3-component>
<child4-component (initialized)="counter++" *ngIf="counter > 2"></child4-component>

Günter Zöchbauer · Answer 2 · 2017-09-15T07:44:39.153

2

Perhaps you mean something like:

<child1-component *ngFor="let child of children"></child1-component>

class MyComponent {
  children:any[] = [];

  load() {
    Observable.interval(1000).take(5).subscribe(e => this.children.push(e));
  }
}

If you want to add different components, you can use an approach like Angular 2 dynamic tabs with user-click chosen components

edited Sep 15 '17 at 07:44

answered Sep 15 '17 at 07:37

Günter Zöchbauer

623,577
216
2,003
1,567

angular 4: load components one by one

2 Answers2

Linked