Trigger one component method after other component fully load

Question

I have two components, both are loading in my <app-root> like this:

<app-header [calendarReference]="calendarRef"></app-header>

<app-calendar #calendarRef></app-calendar>

and index.html

<body>
  <app-root></app-root>
</body>

Is there a way to trigger <app-header> component method after <app-calendar> component is fully load?

do you want to call a public method defined in `` once `` has loaded/rendered? — FAISAL, Aug 23 '17 at 07:43

Fredrik Lundin · Answer 1 · 2017-08-23T08:38:27.650

3

Create an Output() (custom event) on the CalenderComponent and fire that when the component is considered loaded (preferably in the ngAfterViewInit callback)

@Component({
  ...
})
export class CalenderComponent implements AfterViewInit {
  @Output() loaded = new EventEmitter();

  ngAfterViewInit() {
    this.loaded.emit();
  }
}

Then you can trigger any method on the HeaderComponent from the template when the loaded event is fired (ommited the other details in the template for brevity)

<app-header #header></app-header>
<app-calendar (loaded)="header.someMethodToCall()"></app-calendar>

edited Aug 23 '17 at 08:38

answered Aug 23 '17 at 08:05

Fredrik Lundin

8,006
1
29
35

you forgot `implements AfterViewInit` ;) – FAISAL Aug 23 '17 at 08:37
why not needed? how will you `ngAfterViewInit` life cycle hook invoke? – FAISAL Aug 23 '17 at 08:38
1

The interface is just for tooling, you just need the method for it to be invoked. Try it yourself :) – Fredrik Lundin Aug 23 '17 at 08:39
didnt know that, I'll try – FAISAL Aug 23 '17 at 08:39
1

@Faisal - https://angular.io/guide/lifecycle-hooks#interfaces-are-optional-technically – Fredrik Lundin Aug 23 '17 at 08:40

score 2 · Accepted Answer · answered Aug 23 '17 at 08:10

2

Use @Output decorator. I don't know about your code, so I will assume the components:

In your CalendarComponent:

import { Component, AfterViewInit } from '@angular/core';
import { Output, EventEmitter } from '@angular/core';

@Component({
  ...
})
export class CalendarComponent implements AfterViewInit {
    @Output() calendarLoaded: EventEmitter<boolean> = new EventEmitter();

    ngAfterViewInit(){
        console.log('Calendar Loaded');
        this.calendarLoaded.emit(true);
    }
}

Catch the event in you app.component.html:

<app-header #appHeader></app-header>

<app-calendar #calendarRef (calendarLoaded)="afterCalendarLoaded()"></app-calendar>

.. and this is how your app.component.ts would look:

import {Component,ViewChild} from '@angular/core';
import {HeaderComponent} from './header.component';

@Component({
  ...
})
export class AppComponent {
    @ViewChild('appHeader') appHeader: HeaderComponent;

    afterCalendarLoaded(){
        this.appHeader.someMethod();
    }    
}

Here is a working plunker demo. See the console log.

answered Aug 23 '17 at 08:10

FAISAL

33,618
10
97
105

Your answer works and it solved my problem but causes another - header.components method - in your plunker it's someMethod() - triggers like 10 times, no clue why, in this method i'm loading preety big object, maybe this causes it? – esquarial Aug 23 '17 at 09:25
depends on how many times your `` get initialize. – FAISAL Aug 23 '17 at 09:26
it gets initialized only once in `app.component` and i have only `constructor()` method in `app-header`. I dont have any lifecycle hooks in it – esquarial Aug 23 '17 at 09:29
how many times do you see the "Calendar Loaded" log in the console? `someMethod()` will get called everytime the calendar loads. – FAISAL Aug 23 '17 at 09:33
Ok, i think i need you to understand whole concept so you can help me :) `someMethod() { this.drivers = this.calendarReference.drivers; console.log(this.drivers); }` `this.driversService.getDrivers() .subscribe( (drivers) => { this.drivers=Object.keys(drivers).map(function (key) { return drivers[key]; }); }); ` `getDrivers()` method is called in calendar component `constructor()` and that's basically workflow of my app. The problem is that i see console.log(this.drivers) like 10 times – esquarial Aug 23 '17 at 10:58
I'll have a look at it in a while :) – FAISAL Aug 23 '17 at 10:59
Thank you so much bro :) – esquarial Aug 23 '17 at 11:08

Trigger one component method after other component fully load

2 Answers2