CODEWITHSUNDEEP
angulartypescript
MisterniceGuy
MisterniceGuy

Reputation: 1786

Access and modify objects in Parent component

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?

Upvotes: 1

Views: 74

Answers (4)

MisterniceGuy
MisterniceGuy

Reputation: 1786

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;
}

Upvotes: 0

MisterniceGuy
MisterniceGuy

Reputation: 1786

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.

Upvotes: 0

Aloso
Aloso

Reputation: 5387

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;
}

Upvotes: 0

Amir Christian
Amir Christian

Reputation: 595

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);
}

Upvotes: 1

Related Questions