Angular 2+ call a function in a child component from its parent component [duplicate]

by

Inside of your template, using template variables/references:

<parent (click)="yourChild.hide()">
    <child #yourChild></child>
</parent>

live-demo: https://stackblitz.com/edit/angular-so-3?file=src%2Fapp%2Fapp.component.html

OR

Inside of your component:

import { ..., ViewChild, ... } from '@angular/core';

// ...

export class ParentComponent {
   @ViewChild('yourChild' /* #name or Type*/, {static: false}) child;

   ngAfterViewInit() {
      console.log('only after THIS EVENT "child" is usable!!');
      this.child.hide();
   }
}

Inside of your component (option2):

import { ..., ViewChild, ... } from '@angular/core';
import { ..., ChildComponent, ... } from '....';

// ...

export class ParentComponent {
   @ViewChild(ChildComponent /* #name or Type*/, {static: false}) child;

   ngAfterViewInit() {
      console.log('only after THIS EVENT "child" is usable!!');
      this.child.hide();
   }
}

See the official docs: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child

Leave a Comment