delete confirmation modal using viewchild

Question

Hi How to open delete confirmation modal using viewchild Confirmation Are you sure you want to delete this item? Cancel Delete Thanks

Amit Mohanty · Answer

I think the ViewChild decorator doesn't find the element you're trying to query, because deleteModal.nativeElement might be undefined. Make sure you have #deleteModal defined in your HTML where you want to use ViewChild. Then, in your component class, use ViewChild to reference the element. import { Component, ViewChild, ElementRef } from '@angular/core'; @Component({ selector: 'app-your-component', templateUrl: './your-component.component.html', styleUrls: ['./your-component.component.css'] }) export class YourComponent { @ViewChild('deleteModal') deleteModal!: ElementRef; onDelete(Id: number) { const modal = this.deleteModal.nativeElement; this.studentList = this.studentList.filter(student => student.id !== Id); localStorage.setItem("angular17Crud", JSON.stringify(this.studentList)); } }

Jignesh Kumar · Answer

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements AfterViewInit { @ViewChild('confirmationModal') confirmationModal!: ElementRef; constructor() { } confirmDelete(): void { // Display the modal const modal = this.confirmationModal.nativeElement; modal.classList.add('show'); modal.style.display = 'block'; // Handle confirmation logic // You can put your delete logic here or call a method to handle it console.log('Delete confirmed!'); } }

Ramco Ramco · Answer

Hi I am getting error Object is possibly undefined. @ViewChild('deleteModal') deleteModal: ElementRef | undefined; onDelete(Id: number) { const modal = this.deleteModal.nativeElement; this.studentList = this.studentList.filter(student => student.id !== Id); localStorage.setItem("angular17Crud", JSON.stringify(this.studentList)); } Thanks

Jignesh Kumar · Answer

Hello Ramco, Please use this one, Confirmation Are you sure you want to delete this item? Cancel Delete in your ocmponent, import { Component, ViewChild, ElementRef } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { @ViewChild('confirmationModal') confirmationModal: ElementRef; constructor() { } confirmDelete(): void { // Display the modal const modal = this.confirmationModal.nativeElement; modal.classList.add('show'); modal.style.display = 'block'; // Handle confirmation logic // You can put your delete logic here or call a method to handle it console.log('Delete confirmed!'); } }