title: how to dynamically add and remove table row and column in angular 5?
body: <pre><code>Below my component and html files. In below html code I have check boxes and table. 
  </code></pre>
  
  <p>Initial page loading dynamically i am showing two check boxes selected and both check box column name property i am adding to table column. If i check the unselected check box its being selected and dynamically the column name property of that check box is adding to table column. if i uncheck any checkbox i am able to remove that column name from table.
  My requirement: 
  I have tabledata: any = []. When i select any check box same column name table data will add to table and if i unselect the check box same column name table data will remove dynamically.</p>
  
  <pre><code> component.ts
      import { Component, OnInit, Input, ViewChild } from '@angular/core';
      import { MatTableDataSource, MatSort } from '@angular/material';
      import { Sort } from '@angular/material';
  
      @Component({
        selector: 'export-results',
        templateUrl: './export-results.component.html',
        styleUrls: ['./export-results.component.scss']
      })
      export class ExportResultsComponent implements OnInit {
        @Input() getExportResults: any;
        inputCheckBox: any = [];
        callCheckBox: any = [];
        tableHeader: any = [];
        tabledata: any = [];
  
        constructor() {
          this.inputCheckBox = [
            {
              key: 1,
              value: 'name',
              defaultChecked: true,
              columnName: 'input.name',
            },
            {
              key: 2,
              value: 'path',
              defaultChecked: false,
              columnName: 'input.path',
            }
          ]
  
          this.callCheckBox = [
            {
              key: 3,
              value: 'name',
              defaultChecked: true,
              columnName: 'call.name',
            },
            {
              key: 4,
              value: 'rank',
              defaultChecked: true,
              columnName: 'call.rank',
            },
          ]
  
        }
        ngOnInit() {
          this.tableHeader = [
            {
              key: 1,
              value: 'inputname',
              defaultChecked: true,
              columnName: 'input.name',
            },
            {
              key: 2,
              value: 'path',
              defaultChecked: false,
              columnName: 'input.path',
            },
            {
              key: 4,
              value: 'rank',
              defaultChecked: true,
              columnName: 'call.rank',
            },
  
          ];
          this.tabledata = [
            {
              input_name: 'abc1',
              input_path: 'path2',
              call_name: 'aaa',
            },
            {
              input_name: 'abc1',
              input_path: 'path2',
              call_name: 'aaa',
            }]
        }
        onSelected(input) {
  
          let obj = this.tableHeader.find(x =&gt; x.columnName === input.columnName);
          let index = this.tableHeader.indexOf(obj);
          if (index &gt; -1) {
            this.tableHeader.splice(index, 1);
          } else {
            this.tableHeader.push(input);
          }
          this.tableHeader.sort(function (a, b) {
            return a.key - b.key
          })
        }
      }
  
  component.html
  
      &lt;div &gt;
        &lt;!-- Select columns section--&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;label class="select-columns__label-heading"&gt;Select Columns&lt;/label&gt;
            &lt;div&gt;
              &lt;button class="save-button"&gt;&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Select columns checkboxes --&gt;
          &lt;div&gt;
            &lt;div class="select-columns__check-list"&gt;
              &lt;h4&gt;Input&lt;/h4&gt;
              &lt;div *ngFor="let input of inputCheckBox" class="mat-checkbox"&gt;
                &lt;mat-checkbox (change)="onSelected(input)" type="checkbox" [(checked)]="input.defaultChecked" name="inputCheckBox1"&gt;{{input.value}}
                &lt;/mat-checkbox&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="select-columns__check-list"&gt;
              &lt;h4&gt;Call&lt;/h4&gt;
              &lt;div *ngFor="let call of callCheckBox" class="mat-checkbox"&gt;
                &lt;mat-checkbox (change)="onSelected(call)" type="checkbox" [(checked)]="call.defaultChecked" name="inputCheckBox"&gt;{{call.value}}
                &lt;/mat-checkbox&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- table section--&gt;
        &lt;div class="select-columns__table"&gt;
          &lt;table matSort class="export-table"&gt;
            &lt;tr&gt;
              &lt;th *ngFor="let headerName of tableHeader"&gt;{{headerName.columnName}}&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
            &lt;td&gt;
  
            &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>