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.


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

  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.canDelete = false;


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

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

Step 3 - Use it in the Kanban Feature

Example usage to delete a board:

file_type_ng_component_ts board.component.ts
  handleDelete() {

file_type_html board.component.html
<app-delete-button (delete)="handleDelete()"></app-delete-button>


Ask questions via GitHub below OR chat on Slack #questions