CODEWITHSUNDEEP
javascriptangulartypescript
Rey
Rey

Reputation: 1433

Passing event down to a component that is not a parent or child of the other in Angular 2 app

I am trying to figure out the simplest way to pass an event from one Angular 2 component to another when they do NOT share a parent-child relationship.

Specifically I have a component that is used to open a dialog box (when clicked a new component opens). Once the user has clicked on a button on that new dialog component, I want to send notification of that event back to the original component (where the button was clicked to open the dialog box/component to begin with) so that I can fire a function there.

Here's the code that is used in the originating component to trigger the opening of the dialog:

public onResponseSelected(option, selectedService)
{
    const primaryEmail = this.getPrimaryEmail();

    let currentService = this.selectedService;
    let activeList = this.getActiveList();

    if (option && option.toString() === 'Follow-up Required')
    {
        // Create dialog
        let dialogRef: MdDialogRef<ResponseProcessComponent>
            = this.mdDialog.open(ResponseProcessComponent, {
                disableClose: true,
                data: {
                    option: option,
                    currentService: currentService,
                    primaryEmail: primaryEmail,
                    activeList: activeList
                }
            });

        dialogRef = null;

    }
}

I am "packaging" up some data to send to the dialog component as part of "data" here. That's all working as expected.

Now I simply need a way to send an event trigger from dialog component (responseProcessComponent) back down to the originating component. As a reminder, there is no shared view here, so I can't pass down via Input() as if these were components with a parent-child relationship.

I just need a way to trigger an event in the dialog box component and have that sent back down to the other component. What's the simplest way to do this?

Upvotes: 1

Views: 2122

Answers (1)

Hamed Baatour
Hamed Baatour

Reputation: 6932

You could use a shared service and send a notification from any component injecting the service.

Consider the following :

dialog.service.ts

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


@Injectable()
export class DialogService {

  public dialog = new BehaviorSubject<string>('Not Clicked');
  dialogObservable = this.dialog.asObservable();

  changeDialogState (value: string): void {
    this.dialog.next(value);
  }
}

And then in your component:

reciver.component.ts

To get the dialog state you do:

constructor(private ds: DialogService) {
    this.ds.dialogObservable
       .subscribe((dialogState) => {
              //add your logic here!! for now I'm just gonna console log the sate of the dialog
              console.log(dialogState);
          });
    }

To set a new state for the dialog you do:

changeDialogState(){
this.ds.changeDialogState('Cliked');
}

and don't forget to add the service in the provides arrays and the component in the declarations array of the same module so you don't get any errors.

Upvotes: 2

Related Questions