Delete Button Create a confirmable delete button

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.


*Enrollment provides full access to this course (and updates) for life.

Or Signup for Unlimited PRO Access
👈 Dialogs
Server-side Rendering - What? Why? How? 👉

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>

Q&A Chat