Angular4 Passing data from parent to child, emit not working

Question

I'm trying to emit data from the parent component to the child component, however I'm facing a problem with my ng2-smart-table that is in the way of emitting. In my parent component I make use of the ng2-smart-table, which uses userRowSelect (a standard function), when I select a row in the table, I get all the data from that row. The data from that row I want to pass to my child component. I tried using a shared service, input and emitting, none of them have worked so far. Below are code snippets of the two components. Any suggestions on what to do?

Parent html:

<ng2-smart-table [settings]="settings" [source]="data" (userRowSelect)="onRowSelect($event)"></ng2-smart-table>

Parent component:

@Output() passDataToViewPdf: EventEmitter<any> = new EventEmitter();

  ngOnInit() {
      this.reportService.getReportsTemplates().subscribe(response => this.data = response);
  }

  onRowSelect(event): void {
      this.passDataToViewPdf.next(event);
      this.router.navigate(['/report-view-pdf', localStorage.getItem('siteId')]);
  }

Child component:

    @Input() template;

    public handleEvent(event) {
            // get data from passDataToViewPdf emitter
        }
    ngOnInit() { this.template = // get data from handleEvent}

An Output is used to emit, from a child, an event that can be received by the parent. It seems you're trying to emit from a parent an event to the child. That's simply not how angular works. Inputs are used to pass data from parent to child. — JB Nizet, Nov 20 '17 at 10:59
https://stackoverflow.com/questions/35884451/angular-2-sibling-component-communication and https://stackoverflow.com/questions/31026886/how-do-i-share-data-between-components-in-angular-2 and https://stackoverflow.com/questions/41451375/passing-data-into-router-outlet-child-components-angular-2 — AT82, Nov 20 '17 at 18:31

Patryk Brejdak · Answer 1 · 2017-11-20T11:23:07.497

2

That's because Angulars EventEmitter has emit method to emit value. Look at docs

It should be

this.passDataToViewPdf.emit(event);

However looking at your code EventEmitter is defined in parent component, so your parent component is emitting value to it's parent not to child.

It should look like this.

Child component

@Input() template;
@Input() set pdf(newPdf) {
   this._pdf = newPdf;
   this.handleEvent(newPdf);
};
private _pdf;



public handleEvent(event) {
    // process your data
}
ngOnInit() { this.template = // get data from handleEvent}

Parent html template

<child-component [pdf]="pdfValueInParent"></child-component>

Parent component ts

onRowSelect(event): void {
      this.pdfValueInParent = event;
      this.router.navigate(['/report-view-pdf', localStorage.getItem('siteId')]);
  }

edited Nov 20 '17 at 11:23

answered Nov 20 '17 at 10:58

Patryk Brejdak

1,571
14
26

I load my child component on a different page, I route to that page via the onRowSelect function in the parent (/report-view-pdf). I don't include the child-component-selector in the parent-html itself. How do I still get the data to my child without including the selector in the parent-html? – viddrawings Nov 20 '17 at 11:27
1

Well, then you can do it by several way, first of all would be `service` that store data and share it. If it's small data then you can use `localStorage`, or try to pass it via `router`. The quickest and safest would be store data to `service` and then fetch it from `service` inside `child-component`. (By `service` I mean small `angular service` or you can make `singleton`) – Patryk Brejdak Nov 20 '17 at 11:32
I have a shared service already, routing or localStorage is not an option, since I have to pass a lot of json-data. I can use the shared service for a large amount of data, so far I have only used it in my app to pass just one value from component to component? – viddrawings Nov 20 '17 at 11:34
Then use your `shared service`. It will be the best option. It shouldn't be a trouble to store one more variable :) – Patryk Brejdak Nov 20 '17 at 11:35
Next problem: I have my shared service, but when subscribing to the observable it always returns null in my child component. Does routing cause the issue? – viddrawings Nov 20 '17 at 11:54
As long as you do not refresh page should be fine or and staying in current angular site. – Patryk Brejdak Nov 20 '17 at 11:58
Ach, it could be also that after redirect to child-component it just subscribe and from now on it's waiting for change. You have to initialy fetch data from shared service. – Patryk Brejdak Nov 20 '17 at 12:00

Angular4 Passing data from parent to child, emit not working

1 Answers1