Call nested component function angular2

Question

Imagine this Host Component code:

@Component({
    directives: [nestedComponentDirective]
})

export class ParentComponent {
     save():void {
            this.myService.myHTTPCall().subscribe((event) => {
                // if callback successfull we need to let directive know
            })
        }

Now the Nested Component:

@Component({
  selector: 'someSelector',
  template: `
  <div>
    <button [stuff]="stuff"</button>
  </div>`
})


export class ContinuationCheckDirective {
  @Input() waitingForHostedComp(value) {
    console.log ("value", value)
  }

How to call waitingForHostedComp from the Host-Component (Parent)?

Please provide more code. Where is save() and waitingForHostComp()? — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 1, 2016 at 13:21
save() is on ParentComponent importing the ChildComponent. waitingForHostComp() is on ChildComponent. Basically what I want is a listener on the ChildComponent that gets triggered when the ParentComponent (which injects the ChildComponent) gets an answer from the server. — Cloudscape Germany
– Cloudscape Germany, Commented Aug 1, 2016 at 13:29

Bernardo Pacheco · Accepted Answer · 2016-08-01 13:33:35Z

7

The way you can do it is using ViewChild, i.e., we inject the child component into the parent as a ViewChild.

import { ViewChild } from '@angular/core';
import { Component } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'parent-component',
  template: ` implements AfterViewInit
  <child-component></child-component>
  `,
  directives: [ChildComponent]
})
export class ParentComponent {
  @ViewChild(ChildComponent)
  private childComponent: ChildComponent;

  save(): void {
        this.myService.myHTTPCall().subscribe((event) => {
            this.childComponent.waitingForHostedComp(event);
        })
  }

}

You can see more details in the Component Interaction Cookbook: Parent Calls a ViewChild.

answered Aug 1, 2016 at 13:33

Bernardo Pacheco

1,4451 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Cloudscape Germany Over a year ago

Interesting.... will my other Inputs and Outputs work (I did not cite that in this code sample) as before?

Bernardo Pacheco Over a year ago

Absolutely, they'll work as before. ViewChild is just a way to interact with you child component in the typescript code.

Cloudscape Germany Over a year ago

I had to put private childComponent: ChildComponent; into the constructor, and then it works perfectly. Thank you, Bernardo.

Bernardo Pacheco Over a year ago

I'm glad to help @StephanKristyn!

Collectives™ on Stack Overflow

Call nested component function angular2

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related