title: Angular 5 - Push new element into array
body: <p>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.</p>
  
  <p>Here is the code:</p>
  
  <p>app.component.html</p>
  
  <pre><code> &lt;a (click)="addWidget()" class="btn btn-primary pull-right navbar-btn"&gt;Add Widget&lt;/a&gt;
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>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(() =&gt; {
        count++;
      });
    }
  
    addWidget() {
      console.log('This will add a new widget');
    }  
  
  }
  </code></pre>
  
  <p>How can I do this?</p>