title: Displying a specific row of a clicked button in Angular 8
body: <p>Am working on an SPA built using Angular 8, On the view I have a table whereby I display all the data from the backend and loop through it using ngFor loop. This works fine. On the delete button, I have written a logic whereby when the user clicks on the button, it shows the user a message <strong>Are you sure you want to delete</strong> , when the user accepts, it deletes the row.</p>
  
  <p>The problem is when the button is clicked all the rows open and show the message. I want only the message to <strong>be shown on the button that was clicked and not all the buttons</strong>.</p>
  
  <p><strong>Show.component.html</strong></p>
  
  <pre><code> &lt;table class="table table-dark table-hover"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Firstname&lt;/th&gt;
          &lt;th&gt;Age (Years)&lt;/th&gt;
          &lt;th&gt;Gender&lt;/th&gt;
          &lt;th&gt;Action&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr *ngFor="let user of userData"&gt;
         &lt;td&gt;
              {{ user.name}}
         &lt;/td&gt;
         &lt;td&gt;
              {{ user.age}}
         &lt;/td&gt;
         &lt;td&gt;
              {{ user.gender}}
         &lt;/td&gt;
         &lt;td&gt;
          &lt;button class="btn btn-primary" (click)="edit(user.id)"&gt;Edit&lt;/button&gt;
          &lt;span *ngIf="confirmDelete"&gt;
            &lt;span&gt; Are you sure you want to delete ?&lt;/span&gt;
            &lt;button class="btn btn-danger" (click)="deleteUser(user.id)"&gt;Yes &lt;/button&gt;
            &lt;button class="btn btn-primary" (click)="confirmDelete=false"&gt;No &lt;/button&gt;
          &lt;/span&gt;
          &lt;button *ngIf="!confirmDelete" class="btn btn-danger" (click)="confirmDelete=true"&gt;Delete&lt;/button&gt;
         &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p><strong>Show.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit , ViewChild, ElementRef} from '@angular/core';
  import { SharedService } from 'src/app/Services/shared.service';
  import { AuthService } from 'src/app/Services/auth.service';
  import { Router } from '@angular/router';
  import { Observable } from 'rxjs';
  import {  SnotifyService } from 'ng-snotify';
  
  @Component({
    selector: 'app-show',
    templateUrl: './show.component.html',
    styleUrls: ['./show.component.css']
  })
  export class ShowComponent implements OnInit {
    public userData : any[];
    public error = null;
  
    constructor(
      private Shared : SharedService,
      private Auth:AuthService,
      private router: Router,
      private Notify:SnotifyService
      ) { }
  
    ngOnInit() {
      this.Shared.checkAll$.subscribe(message =&gt; this.userData = message);
    }
  
    //delete user
    deleteUser(id:number){
      return this.Auth.delete(id).subscribe(
        data =&gt; console.log(data),
        error =&gt; console.log(error)
      );
    }
  }
  </code></pre>