ItSolutionStuff.com

Angular - How to Find and Update Object in Array?

By Hardik Savani • October 20, 2023
Angular

Hi

This tutorial will give you example of angular find and update object in array. step by step explain angular update object in object array. This article goes in detailed on angular update array of objects. you can see angular update object in array.

Here, i will give you very simple example of how to find object from object array and we will update object value in array.

So,let's see simple example that will help you.

src/app/app.component.html

<button *ngFor="let item of myObjArray" (click)="updateItem(item)">Update</button>

src/app/app.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular';

myObjArray = [

{id: 1, name: "Hardik" },

{id: 2, name: "Vimal" },

{id: 3, name: "Paresh" }

];

updateItem(item){

let index = this.myObjArray.indexOf(item);

item.name = "Change Hardik";

this.myObjArray[index] = item;

console.log(this.myObjArray);

}

}

Output:

[Object, Object, Object]

0: Object

id: 1

name: "Change Hardik"

__proto__: Object

1: Object

2: Object

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Angular Call Component Method from Another Component Example

Read Now →

Angular Titlecase Pipe Example | Titlecase Pipe in Angular

Read Now →

Angular Slice Pipe Example | Slice Pipe in Angular

Read Now →

Angular How to Remove Element from Array?

Read Now →

How to Use Angular Pipe in Component Class?

Read Now →

Angular Checkbox Example | Angular 9/8 Checkbox Tutorial

Read Now →

Angular Radio Button with Reactive Form Tutorial

Read Now →

How to use Toaster Notification in Angular 8?

Read Now →