Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Calling a function in a child Angular2 Component?

Tags:

angular

I have a Component that acts as a Search Bar. It can make api requests and provide the results to the rest of the app through an @Output and EventEmitter but I also want a function to go the other way. The Search Bar component keeps a history of it's searches and I would like to provide a way for the parent component to clear the history. The best I can think of is to somehow call a method in my Search Bar from a parent component.

The best I've come up with (but haven't been able to properly implement) is to try to pass an EventEmitter INTO my Search Bar and the child subscribes to the parent's events. The @Input hasn't completed binding by the time the constructor though so it gets tricky to actually do this.

I suppose I could try and store the history in the parent component, but the reason the Search Bar is a component is because it will appear in multiple places and this doesn't fit with Separation of Concerns so it seems best to keep the history in the Search Bar component.

How can a parent Component call a function on a child Component?

like image 895
Corey Ogburn Avatar asked Feb 01 '16 21:02

Corey Ogburn


People also ask

How do you call a function in child component Vue?

To call a method in a child component with Vue. js, we can pass in a prop from the parent component to its child. Then in the child component, we watch the prop's value and run the method we want. in the child component to register the testProp prop and add the sayHello method.


Video Answer


2 Answers

It turns out I can put a local variable on the component and have access to it's public functions. I.e.:

<search-bar #SearchBar ...></search-bar> <button (click)='SearchBar.ClearHistory()' ...></button> 

Apparently the local variable binds to the Component and not the DOM like I originally thought it did. I imagine that I have access to all public fields and functions.

like image 123
Corey Ogburn Avatar answered Sep 28 '22 01:09

Corey Ogburn


You need to leverage the @ViewChild decorator to reference the child component from the parent one by injection:

import { Component, ViewChild } from 'angular2/core';    (...)  @Component({   selector: 'my-app',   template: `     <h1>My First Angular 2 App</h1>     <child></child>     <button (click)="submit()">Submit</button>   `,   directives:[App] }) export class AppComponent {    @ViewChild(SearchBar) searchBar:SearchBar;    (...)    someOtherMethod() {     this.searchBar.someMethod();   } } 

Here is the updated plunkr: http://plnkr.co/edit/mrVK2j3hJQ04n8vlXLXt?p=preview.

You can notice that the @Query parameter decorator could also be used:

export class AppComponent {    constructor(@Query(SearchBar) children:QueryList<SearchBar>) {     this.childcmp = children.first();   }    (...) } 

Hope it helps you, Thierry

like image 29
Thierry Templier Avatar answered Sep 28 '22 03:09

Thierry Templier