ngx-bootstrap modal onhide callback never executes

somewhat of an Angular newbie here -- so please be gentle. I am using Angular 16 and the Angular Bootstrap library. I'd like to create a modal to manage users for the application -- I get the user info my API. I need to execute some code when the modal is closed, but currently the code in the onHide event callback does not execute. I'd like to figure out why this is. I have reviewed the documentation here https://valor-software.com/ngx-bootstrap/components/modals?tab=overview.

user-management.component.ts

import { Component, OnInit } from '@angular/core';
import { BsModalRef, BsModalService, ModalOptions } from 'ngx-bootstrap/modal';
import { RolesModelComponent } from 'src/app/modals/roles-model/roles-model.component';
import { User } from 'src/app/_models/user';
import { AdminService } from 'src/app/_services/admin.service';

@Component({
selector: 'app-user-management',
templateUrl: './user-management.component.html',
styleUrls: ['./user-management.component.css']
})

export class UserManagementComponent implements OnInit {
users: User[] = [];
bsModalRef: BsModalRef<RolesModelComponent> = new BsModalRef<RolesModelComponent>();

constructor(private adminService: AdminService, private modalService: BsModalService)
{ }

ngOnInit(): void {
this.getUsersWithRoles();
}

getUsersWithRoles() {
this.adminService.getUsersWithRoles().subscribe({
next: users => this.users = users
})
}

openRolesModal() {
const initialState = {
class: 'modal-lg',
initialState: {
title: 'User roles',
}
}

this.bsModalRef = this.modalService.show(RolesModelComponent, initialState);
this.bsModalRef.onHide?.subscribe(() => {
next: () => {
console.log('allan');
}
})
}
}


user.management.component.html


<div class="row">
<table class="table">
<thead>
<tr>
<th style="width: 30%;">Username</th>
<th style="width: 40%;">Active roles</th>
<th style="width: 30%;"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users">
<td>{{user.username}}</td>
<td>{{user.roles}}</td>
<td><button (click)="openRolesModal()" class="btn btn-info">Edit Roles</button></td>
</tr>
</tbody>
</table>
</div>

roles.model.component.ts

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

@Component({
selector: 'app-roles-model',
templateUrl: './roles-model.component.html',
styleUrls: ['./roles-model.component.css']
})
export class RolesModelComponent implements OnInit {
title = "";
constructor(public bsModalRef: BsModalRef) {}
}


roles.model.component.html


<div class="modal-header">
<h4 class="modal-title pull-left">{{title}}</h4>
<button type="button" class="btn-close close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
<span aria-hidden="true" class="visually-hidden">&times;</span>
</button>
</div>
<div class="modal-body">
placeholder
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="bsModalRef.hide()">Save</button>
</div>

Continue reading...