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?