🗑️ Delete Button

Create a confirmable delete button

Create a delete button that confirms the operation before sending the write to the database.

Steps

Step 1 - Generate the Component

command line 
ng g c shared/delete-button

Step 2 - Delete Button Component

The delete button component is just UI (dumb component), meaning it only emits an event with the user’s delete intention. The parent component handles the actual database write.

file_type_ng_component_ts delete-button.component.ts 
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-delete-button',
  templateUrl: './delete-button.component.html',
  styleUrls: ['./delete-button.component.scss']
})
export class DeleteButtonComponent {
  canDelete: boolean;

  @Output() delete = new EventEmitter<boolean>();

  prepareForDelete() {
    this.canDelete = true;
  }

  cancel() {
    this.canDelete = false;
  }

  deleteBoard() {
    this.delete.emit(true);
    this.canDelete = false;
  }

}
file_type_html delete-button.component.html 
<button
  mat-button
  color="warn"
  (click)="canDelete ? deleteBoard() : prepareForDelete()"
>
  <mat-icon>delete</mat-icon>
  <span *ngIf="canDelete">confirm</span>
</button>

<button *ngIf="canDelete" mat-button (click)="cancel()">
  Cancel
</button>

Step 3 - Use it in the Kanban Feature

Example usage to delete a board:

file_type_ng_component_ts board.component.ts 
  handleDelete() {
    this.boardService.deleteBoard(this.board.id);
  }
file_type_html board.component.html 
<app-delete-button (delete)="handleDelete()"></app-delete-button>

Questions? Let's chat

Open Discord