title: How to delete entire row of the table on click checkbox of that row in angular 7
body: <p>I have a table whose data is coming from loop.Here when you press add button new similar row will be added at just bottom.Again when you press edit button all textbox will be enable(initially disable).Till now working fine.But when I check single checkbox or multiple checkbox and press delete button all the row based on checked checkbox will be delete/remove.Again when I click delete button without selecting any checkbox alert message should display and also when user selected all check boxes and tried to delete all the row an alert message should be there that 'at least one row should be there' and he cannot delete all rows unless any one row will be unchecked.I am new to angular can anyone please help me.Here is the code below <a href="https://stackblitz.com/edit/angular-wscsmy" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-wscsmy</a></p>
  
  <h2>app.component.html</h2>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;h2&gt;Basic Table&lt;/h2&gt;
      &lt;p&gt;The .table class adds basic styling (light padding and only horizontal dividers) to a table:&lt;/p&gt;
      &lt;div&gt;&lt;button (click)="enable()"&gt;Edit&lt;/button&gt; &amp;nbsp;
      &lt;button (click)="delete()"&gt;Delete&lt;/button&gt; &lt;/div&gt;
      &lt;table class="table border"&gt;
  
          &lt;tbody&gt;
              &lt;tr *ngFor="let row of groups;let i = index" (click)="setClickedRow(i)"  [class.active]="i == selectedRow"&gt;
                &lt;td&gt; &lt;input type="checkbox"&gt;&lt;/td&gt;
                  &lt;td&gt; &lt;input #focus [disabled]='toggleButton' type="text" value="{{row.name}}"&gt; &lt;/td&gt;
                  &lt;td&gt; &lt;input [disabled]='toggleButton' type="text" value="{{row.items}}"&gt; &lt;/td&gt;
                  &lt;td&gt; &lt;button (click)="addRow(i)"&gt;Add&lt;/button&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>app.component.ts</h2>
  
  <pre><code>import { Component, ViewChild, ElementRef } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    selectedRow: Number;
  
    @ViewChild('focus', { static: false }) input: ElementRef;
    public toggleButton: boolean = true;
    ngOnInit() {
  
    }
    groups = [
      {
        "name": "pencils",
        "items": "red pencil"
      },
      {
        "name": "rubbers",
        "items": "big rubber"
      },
      {
        "name": "rubbers1",
        "items": "big rubber1"
      },
    ];
    addRow(index): void {
      var currentElement = this.groups[index];
      this.groups.splice(index, 0, currentElement);
    }
    enable() {
      this.toggleButton = false
      setTimeout(() =&gt; { // this will make the execution after the above boolean has changed
        this.input.nativeElement.focus();
        this.selectedRow = 0;
      }, 0);
    }
    delete(){
      alert('hello');
    }
    setClickedRow(index) {
      this.selectedRow = index;
    }
  }
  </code></pre>