CODEWITHSUNDEEP
angularlifecycle-hook
esquarial
esquarial

Reputation: 287

Trigger one component method after other component fully load

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?

Upvotes: 2

Views: 8844

Answers (2)

Fredrik Lundin Grande
Fredrik Lundin Grande

Reputation: 8186

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>

Upvotes: 3

FAISAL
FAISAL

Reputation: 34673

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.

Upvotes: 2

Related Questions