How to Push Object in Array in Angular?

By Hardik Savani | April 13, 2020 | Category : Angular


This post will give you example of push object in array in angular. i explained simply about how to add element in array angular. i would like to share with you how to add item to array in angular. i would like to show you add element in array angular.

we will use push and unshift function of array so we can add key value in array. you can easily add add value on top using unshift in array.

So, let's see bellow example that will help you how you can add object and item into array. i also give you simple and with object example.

Example 1:

src/app/app.component.html

<button (click)="addNew()">Add</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';

myArray = [1, 2, 3, 4, 5, 6];

addNew(){

this.myArray.push(this.myArray.length + 1);

console.log(this.myArray);

}

}

Output:

[1, 2, 3, 4, 5, 6, 7]

[1, 2, 3, 4, 5, 6, 7, 8]

[1, 2, 3, 4, 5, 6, 7, 8, 9]

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

Example 2:

src/app/app.component.html

<button (click)="addNew()">Add</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" }

];

addNew(){

this.myObjArray.push({id: 4, name: "Vimal"});

console.log(this.myObjArray);

}

}

Output:

[Object, Object, Object, Object, Object]

0: Object

1: Object

2: Object

3: Object

4: Object

id: 4

name: "Vimal"

__proto__: Object

Example 3: Add on Top

src/app/app.component.html

<button (click)="addNew()">Add</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" }

];

addNew(){

this.myObjArray.unshift({id: 4, name: "Vimal"});

console.log(this.myObjArray);

}

}

Output:

[Object, Object, Object, Object, Object]

0: Object

id: 4

name: "Vimal"

__proto__: Object

1: Object

2: Object

3: Object

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: