delete confirmation modal using viewchild

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

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!');
  }
}

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

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!');
  }
}