Access and modify objects in Parent component

Question

How can I update a specific object which is passed to child from parent. In my Parent Template I for example have 2 Child Templates which I define like this.

<app-ig-dropdown
       [compInfo]="{guid :'820E04E0-8084-4D9C-A268-D8C0D21E74F6',
                    width:'350px',
                    placeHolder: ' -- Select --',
                    fieldText:'Social Media 1'}"
        formControlName="combo1"
        >
</app-ig-dropdown>
<app-ig-dropdown
        [compInfo]="{guid :'820E04E0-8084-4D9C-A268-D8C0D21E74F6',
                    width:'350px',
                    placeHolder: ' -- Select --',
                    fieldText:'Social Media 2'}"
        formControlName="combo2"
>
</app-ig-dropdown>

The question is, how can I now update the value from my component file. I want to be able to access the compInfo object read and modify it and how do I access the different objects based on the formControleName?

Amir Christian · Accepted Answer · 2019-10-13 20:13:50Z

1

Please take a look.

on your tmpl:

<div *ngFor="let compInfo of combInfos; let i = index;" [attr.data-index]="i">
    <app-ig-dropdown
       [compInfo]="compInfo"
       (update)=updateCompInfo(i)
    >
    </app-ig-dropdown>
</div>

on app-ig-dropdown.ts:

@Output() update: EventEmitter<void>;

//in some function

this.update.emit();

on your ts:

//compInfo class

class CompInfo {
  public guid: string;
  public width: string';
  public placeHolder: string;
  public fieldText: string;
}

////////////////////////

public compInfos: Array<CompInfo> = [
 {
  guid :'820E04E0-8084-4D9C-A268-D8C0D21E74F6',
  width:'350px',
  placeHolder: ' -- Select --',
  fieldText:'Social Media 1'
 },
 {
  guid :'820E04E0-8084-4D9C-A268-D8C0D34E74F6',
  width:'350px',
  placeHolder: ' -- Select --',
  fieldText:'Social Media 2'
 }
]

public getCompInfo(guid): CompInfo {
  return this.compInfos.find(c => c.guid === guid);
}

public setCompInfo(compInfo): void {
 this.compInfos = this.compInfos.filter(c => c.guid!== compInfo.guid);
 this.compInfos.push(compInfo);
} 

//example function
public updateCompInfo(index): void {
 let compInfo: CompInfo = this.compInfos[index]; 
 compInfo.width = '100px';
 this.setCompInfo(compInfo);
}

edited Oct 13, 2019 at 20:13

answered Oct 13, 2019 at 19:13

Amir Christian

5956 silver badges20 bronze badges

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

5 Comments

MisterniceGuy Over a year ago

how would i then update a value based o the control name. Also based on your example it seems there is no way to specify the object values in the template

MisterniceGuy Over a year ago

this still requires me to know the index in array of the control before i can update it. If i know the index i could call a simple this.compInfos[0].fieldText ="demo";

Amir Christian Over a year ago

Did you try to use *ngFor?

Amir Christian Over a year ago

And you need to output update function in child component like above

Amir Christian Over a year ago

@MisterniceGuy how is it going?

Aloso · Accepted Answer · 2019-10-13 20:37:22Z

You can't update the parent component. You can however send an event to the parent. In your child component, add

@Output() update = new EventEmitter<CompInfo>();

To update the object, emit an event:

this.update.emit({ ...new_values })

You should define the objects in the parent component:

public firstCompInfo: CompInfo = {
  guid: '820E04E0-8084-4D9C-A268-D8C0D21E74F6',
  width: '350px',
  placeHolder: ' -- Select --',
  fieldText: 'Social Media 1',
};

Then listen to the update event in the template:

<app-ig-dropdown
  formControlName="combo1"
  [compInfo]="firstCompInfo"
  (update)="firstCompInfo = $event">
</app-ig-dropdown>

CompInfo is defined like this:

interface CompInfo {
  public guid: string;
  public width: string;
  public placeHolder: string;
  public fieldText: string;
}

marc_s · Accepted Answer · 2019-10-26 21:19:49Z

0

Ok after some more research and playing around I figured out a much simpler way..

Declare @ViewChild in Parent

  @ViewChild('combo1', { static: true }) combo1: IgDropDownComponent;
  @ViewChild('combo2', { static: true }) combo2: IgDropDownComponent;

Then I can get info of a child via

  console.log(this.combo2.compInfo)

And if I want to set some elements in the object

  this.combo1.compInfo.fieldText = 'Set Media 1';
  this.combo2.compInfo.fieldText = 'Set Media 2';

No need for Index or trying to find a value for a control. Just access the element directly get the value or update it from parent.

edited Oct 26, 2019 at 21:19

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Oct 14, 2019 at 1:13

MisterniceGuy

1,8282 gold badges27 silver badges48 bronze badges

Comments

Dale K · Accepted Answer · 2019-12-16 21:26:38Z

0

I ended up using the below code to update any values as it doesn't require to know index beforehand:

public updateArrayElement(formControlValue, element, newValue) {
    this.index = this.compInfos.findIndex(x => x.formControlName === formControlValue);
    this.compInfos[this.index][element] = newValue;
}

edited Dec 16, 2019 at 21:26

Dale K

28.1k15 gold badges59 silver badges86 bronze badges

answered Oct 13, 2019 at 20:35

MisterniceGuy

1,8282 gold badges27 silver badges48 bronze badges

Collectives™ on Stack Overflow

Access and modify objects in Parent component

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related