angularjs directive - Angular 2 pass data between two components -

i want pass data between 2 components problem is:

i have 2 components, lets suppose 1 'main' , 'modal-dialog'.

in main want open modal-dialog , data modal-dialog without leaving main component

i know how use @input can't see way use in app

for example in main.html, if want pass data main modal use

<modal-dialog [data]="data"> </modal-dialog>

but want inverse

something that

<modal-dialog /*get data modal when event happens*/ > </modal-dialog>

modal-dialog send message main, example, if close or click in button.

look @output

<modal-dialog [data]="data" (dialogevent)="processevent($event)"> </modal-dialog>

in modaldialogcomponent

@output() public dialogevent = new eventemitter();  public methodwhichtriggers(){    this.dialogevent.emit({id: 1, type: "anything need"}) }

in maincomponent need have

public processevent($event){    console.log($event); //will print {id: 1, type: "anything need"} }

ANy