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-18 20:27:29Z

4

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, 2017 at 20:27

answered Sep 18, 2017 at 20:03

alexKhymenko

5,64826 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

SBB Over a year ago

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 Over a year ago

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

alexKhymenko Over a year ago

@SBB there is also viewChildren to loop throught child components

SBB Over a year ago

Thanks, that looks like it could work. Trying to implement now and I will let you know

Bob Meijwaard · Accepted Answer · 2017-09-18 20:10:15Z

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, 2017 at 20:10

Bob Meijwaard

40810 silver badges20 bronze badges

2 Comments

SBB Over a year ago

So how would my parent (Where the save button is) tell the child (the included component) to emit its value back to the parent?

Bob Meijwaard Over a year ago

I suppose that the EventEmitter will be triggered by the childcomponent based on a change event, rather then a click event in the example.

Collectives™ on Stack Overflow

Angular - Getting data from a child component?

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related