Angular2 call method of other component

Question

I have an Angular2 app in which I created an Header component, that's rendered in my main App component.

Now, I have an other Form component that should have its submit button placed in the Header. How could I do that?

I sort of need to communicate between the submit button in the Header and the submit method of the Form component. I know it's trivial to do parent>child or child>parent communication, but in this case there is no parent-child relationship nor sibling relationship between my Header and Form components.

My component tree looks like this:

- app-root
  |-- app-header // -> this is where the submit button is
  |-- app-edit-profile
      |-- app-profile-form // -> this is my form

Does someone have any idea of a possible implementation?

Answer 1

You can create one service which is shared between your header and form component in which you can define Observable so that you can subscribe to that Observable from form and perform some action when you receive some value from header.

common.service.ts

import { Injectable, Inject } from '@angular/core';
import { Subject }    from 'rxjs/Subject';
@Injectable()
export class CommonService {
  private notify = new Subject<any>();
  /**
   * Observable string streams
   */
  notifyObservable$ = this.notify.asObservable();

  constructor(){}

  public notifyOther(data: any) {
    if (data) {
      this.notify.next(data);
    }
  }
}

header.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

import { CommonService } from './common.service';

@Component({
  selector   : 'header',
  templateUrl : './header.html'
})
export class HeaderComponent implements OnInit, OnDestroy {
  constructor( private commonService: CommonService ){
  }

  ngOnInit() {       
  }

  onSubmit(){
    // this method needs to be called when user click on submit button from header
    this.commonService.notifyOther({option: 'onSubmit', value: 'From header'});
  }
}

form.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

import { CommonService } from './common.service';

@Component({
  selector   : 'form',
  templateUrl : './form.html'
})
export class FormComponent implements OnInit, OnDestroy {
  private subscription: Subscription;
  constructor( private commonService: CommonService ){
  }

  ngOnInit() {
    this.subscription = this.commonService.notifyObservable$.subscribe((res) => {
      if (res.hasOwnProperty('option') && res.option === 'onSubmit') {
        console.log(res.value);
        // perform your other action from here

      }
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Answer 2

Additionally to the solution with the Observable, I think it's important to say something about the EventEmitters as they are, in my opinion, easier to use in this kind of scenarios.

In the child controller

import the EventEmitter and the Output types.

import { EventEmitter, Output } from "@angular/core

declare an output property of type EventEmitter

@Output() formSubmit$: EventEmitter<boolean>;

remember to initialise the EventEmitter in the constructor as follows:

this.formSubmit$ = new EventEmitter();

and finally, with a proper action binded to the submit button, trigger the EventEmitter "emit" method to propagate the event across your app:

this.formSubmit$.emit(true);

In the parent Controller

In the parent's view, bind the formSubmit$ event to an action of the controller:

<child-selector (formSubmit$)="handleFormSubmit($event)"></child-selector>

then declare the method in the Controller

public handleFormSubmit(submit: boolean): void {
    alert("Form has been submitted! Do your stuff here!");
}

Obviously, this kind of strategy can be used only when you need to exchange data from a child to a parent controller.