Reputation: 3061
I have something like this:
My components
<ComponentA></ComponentA>
<ComponentB></Componentb>
import { Component, OnInit } from "@angular/core";
@Component({
selector: "component",
templateUrl: "<button (click)=""></button>" //I need call fn_componentB
})
export class ComponentA implements OnInit {
constructor() {}
ngOnInit() {}
}
import { Component, OnInit } from "@angular/core";
@Component({
selector: "component",
templateUrl: "./component.component.html",
styleUrls: ["./component.component.scss"]
})
export class ComponentB implements OnInit {
constructor() {}
ngOnInit() {}
fn_componentB() {
alert("call");
}
}
I want that when I click on a button contained in my component A
, a function is called which is contained in my component B
(fn_componentB
). How can I do it? I have tried viewchild, and output but am not sure in this case what is best.
Upvotes: 0
Views: 51
Reputation: 2201
You could do this by giving component B an ID and calling a public method in it like this;
<div>
<app-component-a (click)="compB.doSomething();"></app-component-a>
<app-component-b #compB></app-component-b>
</div>
Component B defines doSomething as a normal public method;
public doSomething() { }
Upvotes: 1