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. SignUp for Unlimited PRO Access OR *Enrollment provides full access to this course (and updates) for life. đŧ Login to Watch đ 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> Chapters Optional Beginner Project đļ 1 Angular Tutorial for Beginners Build a Tic-Tac-Toe game with Angular free 20:23 Intro đ 2 Resources Source code and course resources free 1:51 ⥠3 CLI Introduction to the Angular CLI free 4:01 âŖī¸ 4 Anatomy The purpose of every file in Angular free 5:13 đĻ 5 Components An introduction to Components, Directives, and Pipes free 13:51 đ 6 Dependency Injection and Services What is dependency injection (DI) and why is it so useful? free 3:18 đ§Š 7 Modules How NgModules help manage code and complexity free 2:41 App đģ 8 App Overview Overview of the organization and architecture of the Firestarter demo app. 2:50 đ¨ 9 Meet Angular Material Introduction to Angular Material and design systems 5:21 đī¸ 10 Schematics Using Angular Material Schematics 1:10 đ¤ 11 Shared Module Share component and Material Modules efficiently throughout the app 3:59 đ 12 App Navigation Shell Add a responsive navigation shell to the app 8:45 đ 13 Routing Create a home page configured with the Angular Router. 2:56 đĨ 14 Firebase Setup Add Firebase and @angular/fire to your app 2:42 Users 𤸠15 Lazy Loaded Login Feature Configure the router for lazy-loaded user module, aka code splitting. 3:54 đ¤ 16 Google SignIn Create a directive that extends Google SignIn to any button or element 4:37 đ§ 17 Email Password Auth SignUp, SignIn, and reset a password with Reactive Forms 11:32 đŽ 18 Auth Guard Protect routes with guards. 4:59 Kanban đą 19 Kanban Module Kanban feature module setup 2:10 đĨ 20 Firestore Data Model Firestore database model for kanban boards and backend security rules. 4:48 đĨ 21 Database Service Create a specialized Firestore database service for Kanban boards 7:39 đą 22 CDK Drag and Drop Add drag and drop capabilities to a Material Card 6:36 đą 23 Drag and Drop Animation Animate the CDK Drag and Drop events with CSS transitions 3:06 đą 24 Dialogs Create, update, delete data from a Material Dialog modal popup 8:03 đī¸ 25 Delete Button Create a confirmable delete button 3:10 Server-side Rendering â 26 Server-side Rendering - What? Why? How? Key concepts related to SSR and Angular Universal 2:57 đˇī¸ 27 SEO Service Create a service for Open Graph & Twitter meta tags. 5:32 đĻ 28 Angular Universal with NestJS Add server-side rendering to Angular with Nest.js 2:56 đ 29 Prerendering Prerender with Angular Universal using a vanilla JS script 4:04 đŠī¸ 30 Angular Universal on Google Cloud Run Deploy to Angular Universal to Google Cloud Run and connect it to Firebase Hosting 5:55