How to listen the close event of a modal in ngBootstrap and Angular?

Question

I'm trying to subscribe to the close event of a modal using ngbootstra, but I don't understand how it works. I have 2 components The 1st for lauching the modal and inside the 2nd one.

the 1st

html

<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>

TS

import { OtherComponent } from './../other/other.component';
import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap/modal/modal.module';

@Component({
  selector: 'app-joker',
  templateUrl: './joker.component.html',
  styleUrls: ['./joker.component.scss']
})
export class JokerComponent {
  constructor(private modalService: NgbModal, private activeModal: NgbActiveModal) { }

  open(): void{ 
    const modalRef = this.modalService.open(OtherComponent, {centered: true});
    modalRef.componentInstance.name = 'Gerardo';
  }
}

The 2nd

html

<div class="modal-header">
  <h4 class="modal-title">Hi there!</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

TS

import { Component, Input} from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-other',
  templateUrl: './other.component.html',
  styleUrls: ['./other.component.scss']
})
export class OtherComponent {

  @Input() name: any;
  constructor(public activeModal: NgbActiveModal) { }
  

}

But I don't know hoy to do the subscribe because it says that the close method is not an observable, also I like know how to emit any value when the modal is close in the 2nd component (2nd) Does some know how to do it?.

Btw is it necessary to do a unsubscribe?

Answer 1

In OtherComponent

<button type="button" class="btn btn-outline-dark" (click)="close()">Close</button>
    
    
    close() {
        this.activeModal.close("Send data")
      }
    

so you can subscribe this from parent component

In JokerComponent

    open(): void{ 
        const modalRef = this.modalService.open(OtherComponent, {centered: true});
        modalRef.afterClosed().subscribe(data => {
              console.log(data)
              if(data){
                  // you can check if the modal returns any data or not
              }
        })
      }