Angular: invoking a function in one component, with events on another component

Question

Working with Angular6, let's say I have 2 child components A, B that are both part of parent component P. I want to use a form input on component A- so once clicked, the string value will pass and trigger a function on component B. something like this perhaps:

functionOnB(valueFromA: string) { //some code here; }

is this even possible?

I've successfully transmitted data between components using angular's EventEmitter, but is it possible to invoke functions with this data, not just pass the raw information?

https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/ if you scroll down there is an example of sharing data with a service. — Jason White, Sep 19 '18 at 21:06

Learning · Accepted Answer · 2018-09-19T21:13:08.110

24

A common service can be used to trigger the event/function from another component. For example: ComponentA's click event will call a service method. Then, that service method should emit another event. ComponentB should then subscribe to the service's event emitter. Sample code: ChildA (HTML):

<button (click)="onClick()"></button>

ChildA Controller (TS):

  onClick() {
    this.commonService.AClicked('Component A is clicked!!');
  }

Common Service (TS):

import { Injectable, EventEmitter, Output } from '@angular/core';

@Output() aClickedEvent = new EventEmitter<string>();

AClicked(msg: string) {
  this.aClickedEvent.emit(msg);
}

ChildB Controller (TS):

  ngOnInit() {
    this.commonService.aClickedEvent
    .subscribe((data:string) => {
      console.log('Event message from Component A: ' + data);
    });
  }

edited Sep 19 '18 at 21:13

answered Sep 19 '18 at 20:47

Learning

1,333
16
24

1

is it possible you'll provide a code example for ComponentB? how can a function be subscribed to an event, and not just a variable? with the same @input decorator? – Maor Barazani Sep 19 '18 at 20:49
Event can be emitted with @Output operator. – Learning Sep 19 '18 at 20:51
Gotcha! thanks for the example, I'm sure it'll sort everything out. – Maor Barazani Sep 19 '18 at 21:43
Thanks for the example! – amm98d Jun 02 '21 at 23:11

score 2 · Answer 2 · answered Sep 19 '18 at 22:21

Yes, it is possible, you can use the @Input decorator in order to pass a Component reference to another Component. In that way you can call ComponentB methods from ComponentA.

For example inside FirstComponent you declare a instance variable of type SecondComponent:

 @Input()
 second: SecondComponent;

And in your Parent HTML you pass the component reference:

 <app-first [second]="second"></app-first>
 <app-second #second></app-second>

Component Interaction Cookbook

Here you have a working example: Component Interaction Example

Wow! that really solves the problem in a simple elegant way. no need for emitting events, just passing references around. I now have direct access the other components' methods, variables, and what not.. Thanks! — Maor Barazani, Sep 21 '18 at 13:36

Angular: invoking a function in one component, with events on another component

2 Answers2