I have two components as follows and I want to call a function from another component. Both components are included in the third parent component using directive.
Component 1:
@component(
selector:'com1'
)
export class com1{
function1(){...}
}
Component 2:
@component(
selector:'com2'
)
export class com2{
function2(){...
// i want to call function 1 from com1 here
}
}
I've tried using @input
and @output
but I don't understand exactly how to use it and how to call that function, can anyone help?
If com1 and com2 are siblings you can use
@component({
selector:'com1',
})
export class com1{
function1(){...}
}
com2 emits an event using an EventEmitter
@component({
selector:'com2',
template: `<button (click)="function2()">click</button>`
)
export class com2{
@Output() myEvent = new EventEmitter();
function2(){...
this.myEvent.emit(null)
}
}
Here the parent component adds an event binding to listen to myEvent
events and then calls com1.function1()
when such an event happens.
#com1
is a template variable that allows to refer to this element from elsewhere in the template. We use this to make function1()
the event handler for myEvent
of com2
:
@component({
selector:'parent',
template: `<com1 #com1></com1><com2 (myEvent)="com1.function1()"></com2>`
)
export class com2{
}
For other options to communicate between components see also component-interaction