Angular 2 pass data between two components

Question

I want to pass data between two components but my problem is:

I have two components, lets suppose one is 'main' and another 'modal-dialog'.

In my main I want to open the modal-dialog and get the data from my modal-dialog without leaving my main component

I know how to use @Input but I can't see a way to use that in my app

For example in my main.html, if I want to pass data from main to modal I would use

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

But I want to do the inverse

Something like that

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

Modal-dialog will send a message for my main, for example, if I close it or click in some button.

Possible duplicate of [Emit and broadcast events throughout application in Angular4](https://stackoverflow.com/questions/40889320/emit-and-broadcast-events-throughout-application-in-angular4) — Peter, Sep 14 '17 at 07:51

score 3 · Accepted Answer · answered Sep 14 '17 at 01:00

3

Look to @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 you need"})
}

In MainComponent you will need to have

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

answered Sep 14 '17 at 01:00

Vova Bilyachat

18,765
4
55
80

I will try it. Thanks a lot! – Rafael Andrade Sep 14 '17 at 01:47

score 3 · Answer 2 · answered Apr 25 '18 at 10:01

I suggest that best approach is that to use rxjs subject. You can pass data between modal dialog component or whatever it is. Create new rxjs subject in your service like this

import { Subject } from 'rxjs/Subject';
@Injectable()
export class MyService {

    myNewSubject = new Subject<any>();

    informDataChanges(passyourobject){
      this.myNewSubject.next(passyourobject);
  }

}

When change happens in your component or you want to pass data to another component simply call this service function from your component and pass data as parameter to this function. You can do that with something like this

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

    @Component({
      selector: 'app-some',
      templateUrl: './some.component.html',
      styleUrls: ['./some.component.css']
    })
    export class SomeComponent implements OnInit {

      constructor( private myService: MyService) { }

      someFunction(){
        this.myService.informLogout('somedata');//Passing data to service here
      }

  ngOnInit() {

  }

}

Now all you need to do is subscribe to that data in another component. IMPORTANT subject keeps on watches any changes to it, and data will be continuous stream and it will be automatically subscribed. So it is best to subscribe to the subject in the constructor, and changes will be immediately reflected in that component.

You do it with some thing like this

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

        @Component({
          selector: 'app-another',
          templateUrl: './another.component.html',
          styleUrls: ['./another.component.css']
        })
        export class AnotherComponent implements OnInit {

          constructor( private myService: MyService) {
            this.myService.myNewSubject.subscribe(data=>{
             console.log(data);
       }) 
}

This way you can pass data between any components easily.

score 1 · Answer 3 · answered Sep 14 '17 at 05:24

1

Refer this link for various kind of communication between component.

answered Sep 14 '17 at 05:24

Dhaval kansagara

551
4
17

Angular 2 pass data between two components

3 Answers3

Linked