Angular 5 - Push new element into array

Question

I have a function on a button click which I want it to add a new line to the current widgets data so that it will add a new one to the current.

Here is the code:

app.component.html

 <a (click)="addWidget()" class="btn btn-primary pull-right navbar-btn">Add Widget</a>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  public widgets: any;

  constructor() {
    let count = 1;
    this.widgets = [
      { id: 1, title: 'Widget 1', config: { row: 1, col: 1, sizex: 1 }},
      { id: 2, title: 'Widget 2', config: { row: 1, col: 2, sizex: 1 } },
  ];
    this.widgets.map(() => {
      count++;
    });
  }

  addWidget() {
    console.log('This will add a new widget');
  }  

}

How can I do this?

Try adding `this.widgets.push({ id: 3, title: 'Widget 3', config: { row: 1, col: 3, sizex: 1 }})` to `addWidget()`? — erikvimz, Dec 18 '17 at 10:24
By the way, what the point of that `.map()` function? To get amount of entries inside of an array just use the `.length` property. — erikvimz, Dec 18 '17 at 10:27
There is little advantage in using typescript if you define everything as `any`. Try creating a class or interface for widget and config. — Nico Van Belle, Dec 18 '17 at 10:27
Can you explain bit more what 'it will add a new one to the current' refers to? Do you want to modify rows of each widget to increase by one? — Miroslav Jonas, Dec 18 '17 at 10:28
Yes, it would be good if the id was not repeated but mainly it's to add new data — , Dec 18 '17 at 10:31
So something like this might work? this.widgets.forEach(widget => widget.config.row = widget.config.row+1) — Miroslav Jonas, Dec 18 '17 at 10:34
Possible duplicate of [How to append something to an array?](https://stackoverflow.com/questions/351409/how-to-append-something-to-an-array) — Jota.Toledo, Dec 18 '17 at 10:48

Dhyey · Accepted Answer · 2017-12-18T10:53:11.637

10

You are using an array widgets and can use the push method to add an element at the end of array. To maintain dynamic id and name we can use the length property of Array's like below:

addWidget() {
    const title: string = 'Widget ' + this.widgets.length;
    this.widgets.push({ id: this.widgets.length + 1, title: title, config: { row: 1, col: 3, sizex: 1 } })
}

edited Dec 18 '17 at 10:53

answered Dec 18 '17 at 10:33

Dhyey

4,275
3
26
33

this.widgets.length+1 since he starts from Widget 1 – Gianluca Paris Dec 18 '17 at 10:45
What if... the first widget `[0]` gets removed and another one gets added, you end up with two widgets that have the same ID. – erikvimz Dec 18 '17 at 11:57
@Eric In that case the OP needs to keep a counter which is always incremented on push and never decremented. Then we case use that counter for id – Dhyey Dec 18 '17 at 12:05

Amal · Answer 2 · 2017-12-18T10:28:37.947

1

You can do this:

  addWidget() {
this.widgets.push({ id: 3, title: 'Widget 3', config: { row: 1, col: this.widget.length, sizex: 1 }})
  }

edited Dec 18 '17 at 10:28

answered Dec 18 '17 at 10:27

Amal

278
1
11

1

Do NOT just copy and paste my code. To make it a valid answer you need to explain the code a bit. – erikvimz Dec 18 '17 at 10:28

Angular 5 - Push new element into array

2 Answers2