Angular - Getting data from a child component?

Question

I have a table that contains users records. There is a column for "tags" that allow you to tag the record with one or more values.

For this, I created an edit button on the row. Once clicked, I show a component that I have wrapped in an ngIf.

<span *ngIf="inEditMode(r.RuleParentID, a.AttributeID)">
 <app-inline-select [selected]="a" [source]="fetchSourceList(a.AttributeID)" [ruleParentID]="r.RuleParentID" [attributeID]="a.AttributeID"></app-inline-select>
</span>

The included component utilizes Select2 allowing for a multi-select input field.

This is all working just fine. However, I now need to add a Save Button in my parent component that will send some data off to my service. I need the data from this included component though.

During some research, I thought that ViewChild may have been an option but this component is on the page multiple times within an ngFor loop so it's essentially dynamic not allowing me to call it by name directly which is what ViewChild would need.

How could I go about getting data? The save button is unrelated to the included component it self.

alexKhymenko · Accepted Answer · 2017-09-18T20:27:29.393

1

selected is an event not property so you need to wrap it in () not []. you can call function that will determine what you need to do when selected event fired.

<span *ngIf="inEditMode(r.RuleParentID, a.AttributeID)">
 <app-inline-select (selected)="saveToArray($event)" [source]="fetchSourceList(a.AttributeID)" [ruleParentID]="r.RuleParentID" [attributeID]="a.AttributeID"></app-inline-select>
</span>

in component

    arrays = []
    saveToArray(a) {
      this.array.push(a);
    }

and then

   onSave() {
     this.service.save(arrays).then(() => {})
   }

there is also viewChildren where you will have array of components. So you can loop through every component and get data.

  @ViewChildren(InlineSelectComponent) alerts: QueryList<InlineSelectComponent>

  ngAfterViewInit() {
    this.alerts.forEach(instance => console.log(instance));
  }

edited Sep 18 '17 at 20:27

answered Sep 18 '17 at 20:03

alexKhymenko

5,450
23
40

`selected` is a property I am passing to the component. Its the list of values that are already selected. Poorly named? Maybe, but it's unrelated to the event you mentioned. – SBB Sep 18 '17 at 20:12
The only issue I see with this is that lets say I have 10 records on the page. A user could edit more than one record at a time, exposing one or more of the included components. The array that they are then pushed to is not associated with any one specific child in order to know which values belong to which components – SBB Sep 18 '17 at 20:15
@SBB there is also viewChildren to loop throught child components – alexKhymenko Sep 18 '17 at 20:22
Thanks, that looks like it could work. Trying to implement now and I will let you know – SBB Sep 18 '17 at 20:33

score 0 · Answer 2 · answered Sep 18 '17 at 20:10

0

To pass data from a child component back to a parent component you can use an EventEmitter. There was a post that shows how to do it: https://stackoverflow.com/a/42109866/7194432

answered Sep 18 '17 at 20:10

Bob Meijwaard

388
9
20

3

So how would my parent (Where the save button is) tell the child (the included component) to emit its value back to the parent? – SBB Sep 18 '17 at 20:13
1

I suppose that the EventEmitter will be triggered by the childcomponent based on a change event, rather then a click event in the example. – Bob Meijwaard Sep 18 '17 at 20:20

Angular - Getting data from a child component?

2 Answers2