Ndtyjky

I have a component with a template which makes a call to the function which is in other component.

<div class="collapse list-unstyled">

<div *ngFor="let data of data1; let i=index">

 <li>

 <a  class="dropdown-item menu-item"  (click)= menu(i)  >

                                {{data.item}} 

                            </a>

 </li>

 </div>

Here menu(i) is the function of other component.
So from this component I want to directly make the call to the function in the other component. Their is no parent-child relation between the components. What could be the preferable way for me to do it?

Ideally, in this situation you would not want to provide a component like you would normally provide a service, as the currently accepted answer suggests. You could/should use a shared service. I will suggest a shared service to allow the component to component communication you need.

First thing you will need is a common service that any component could get injected via the IoC container Angular makes available. It could look something like this:

import { Injectable } from '@angular/core';

import { Subject } from 'rxjs';



@Injectable()

export class CommonService {

    menuChoosen$ = new Subject<number>();



    constructor() { }

}

Since you seem to be using Angular 5, you will need to provide this service from the app module.

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';



import { AppComponent } from './app.component';

import { OneComponent } from './one/one.component';

import { AnotherComponent } from './another/another.component';

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



@NgModule({

imports:      [ BrowserModule, FormsModule ],

declarations: [ AppComponent,

    OneComponent,

    AnotherComponent,

    YetAnotherComponent ],

providers:  [ CommonService ], // HERE

bootstrap:    [ AppComponent ]

})

export class AppModule { }

The CommonService service exposes a menuChoosen$ Subject that any component can subscribe to when it needs to know when a menu item has been chosen. In the component where the menu item is selected, you inject the common service, and call the next function on the Subject when a menu option is selected.

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

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



@Component({

    selector: 'app-one',

    templateUrl: './one.component.html',

    styleUrls: ['./one.component.css']

})

export class OneComponent implements OnInit {

    data1 = [{item: 'Menu Item 1 (index 0)'}, {item: 'Menu Item 2 (index 1)'}, {item: 'Menu Item 3 (index 2)'}];

    constructor(private commonService: CommonService) { }



    ngOnInit() { }

    menu(index: number) {

        this.commonService.menuChoosen$.next(index); // next fired here!!

    }

}

The template for the OneComponent will look something like this:

<div *ngFor="let data of data1; let i=index">

    <li (click)="menu(i)">{{data.item}} </li>

</div>

When a list item (menu item) is clicked, the index (i) value is sent to the menu function, which in turn calls the next function of the CommonService menuChoosen$ Subject.

Any other component that subscribes to the menuChoosen$ Subject will then be updated. In this case, the AnotherComponent is a subscriber, and will know about the event. See below.

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

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



@Component({

    selector: 'app-another',

    templateUrl: './another.component.html',

    styleUrls: ['./another.component.css']

})

export class AnotherComponent implements OnInit {

    chosenMenuIndex: number;

    constructor(private commonService: CommonService) { }



    ngOnInit() {

        // the subscription starts below

        this.commonService.menuChoosen$.subscribe(idx => {

            this.chosenMenuIndex = idx;

            this.menu(this.chosenMenuIndex); // local function call

            console.log('menu index chosen: ', this.chosenMenuIndex);

        });

    }

    menu(index: number) {

        // do something

    }

}

The template for AnotherComponent is below.

<p>

    Menu Index: {{chosenMenuIndex}}

</p>

The chosenMenuIndex value will update when ever a new menu item is chosen. You can take any action inside the subscribe that is necessary with your application.

Why is a shared, or common, service a better option than providing, and injecting another component? It keeps you from tightly coupling components. Any given component should not have any awareness of another component, unless a parent component needs to know about child components.

If you choose to provide a component like you would a service, and inject that component into another component, they are tightly coupled. One component is completely dependent on the other. It may start as one component depending one other component, but can quickly turn into one component depending on another, then another, then another. Next thing you know, you are providing a bunch of components when one service could have taken care of that for you.

Here is a example stackblitz of using a shared service for component communication.

The short answer is that you can't. Each component is an independent entity and unless one component is contained within another (parent/child relationship), there is no direct mechanism for communication between them.

If you need to build some functionality that can be called by several components, build a service. The service can then be accessed by any component that needs it.

You can even use a service to share data. For example, one component can set some flags into a service and another component can later read those flags from the service.

Another option is to use the router and route to the other component, if that makes sense in your case.

Here is a chart I did awhile back identifying some of the key techniques for communicating between components.