angular: ngx-bootstrap modal fails when closing

 

>PROBLEM

Attempt to close the modal fails.

ERROR TypeError: Cannot read properties of undefined (reading 'hide')
    at main.js:1:434209
    at UT (main.js:1:69900)
    at s (main.js:1:70062)
    at HTMLButtonElement.<anonymous>

>SOLUTION

BEFORE

The new modal component code:

import { Component, OnInit, TemplateRef } from '@angular/core';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-deltodo',
  templateUrl: './deltodo.component.html',
  styleUrls: ['./deltodo.component.scss'],
})
export class DeltodoComponent implements OnInit {

  modalRef: BsModalRef;
  title: string;

  constructor() {}


  ngOnInit(): void {}

}

AFTER

The modal component code:

 

import { Component, OnInit, TemplateRef } from '@angular/core';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-deltodo',
  templateUrl: './deltodo.component.html',
  styleUrls: ['./deltodo.component.scss'],
})
export class DeltodoComponent implements OnInit {

  title: string;
  // list: any[] = [];

  constructor(public modalRef: BsModalRef) {}

  ngOnInit(): void {}

}

 

>ENV

angularx_ngx_bootstrap_modal_

Angular CLI: 13.2.2

Node: 16.13.1

Package Manager: npm 8.5.4

OS: win32 x64