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.

Get Unlimited PRO Access

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

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.

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;
  }

}

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:

board.component.ts

  handleDelete() {
    this.boardService.deleteBoard(this.board.id);
  }

board.component.html

<app-delete-button (delete)="handleDelete()"></app-delete-button>

👈 Dialogs

Server-side Rendering - What? Why? How? 👉

Questions?

Ask questions via GitHub below OR chat on Slack #questions