Myujth

I have two components those are component-A,component-B and in my component-A i have opened ng-bootstrap Model its working fine and problem is when i tapped on close button i want to get reason for dismiss those functionality handled in Component-A

But my close button action is there in component-B how can i handle this scenario can some one help me please.

ComponentA:

public open() 
 this.modalService.open(ComponentB, ariaLabelledBy: 'modal-basic-title', size: 'lg' ).result.
 then((result) => 
 this.closeResult = `Closed with: $result`;
 , (reason) => 
 this.closeResult = `Dismissed $this.getDismissReason(reason)`;
 );
 

 private getDismissReason(reason: any): string 
 if (reason === ModalDismissReasons.ESC) 
 return 'by pressing ESC';
 else if (reason === ModalDismissReasons.BACKDROP_CLICK) 
 return 'by clicking on a backdrop';
 else 
 return `with: $reason`;
 
 

ComponentB:

 close()
 this.activeModel.close()
 

CoponentB.html

<!-- Model Code Start -->
 <div class="modal-header" style="background: deepskyblue; font-size: xx-large;">
 <h4 class="modal-title" id="modal-basic-title">Registration & SignIn</h4>
 <button type="button" class="close" aria-label="Close" (click)="close()">
 <span aria-hidden="true">&times;</span>
 </button>
 </div>

 <!-- Model Body -->
 <div class="modal-body">
 <!-- Tab Start Code -->
 <ngb-tabset>
 <ngb-tab>
 <ng-template ngbTabTitle><b>Login</b></ng-template>
 <ng-template ngbTabContent>
 <br>
 <form>
 <div class="form-group">
 <div class="input-group mb-3">
 <div class="input-group-prepend">
 <span class="input-group-text" id="basic-addon1">@</span>
 </div>
 <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
 </div>
 <div class="input-group mb-3">
 <div class="input-group-prepend">
 <span class="input-group-text" id="basic-addon1">*</span>
 </div>
 <input type="password" class="form-control" placeholder="Password" aria-label="Username"
 aria-describedby="basic-addon1">
 </div>
 </div>
 <button type="button" style="margin-left: 39%;" class="btn btn-outline-success" (click)="c('Save click')"><b>Login</b></button>
 </form>
 </ng-template>
 </ngb-tab>

 <ngb-tab>
 <ng-template ngbTabTitle><b>Register</b></ng-template>
 <ng-template ngbTabContent>
 <br>
 <form [formGroup]="registrationForm">
 <div class="form-group">
 <div class="row">
 <div class="col-md-2">
 <label for="FormControlUserName" style="color: lightseagreen;font-size: medium;"><b>User Name*:</b></label>
 </div>
 <div class="col-md-6">
 <input type="text" formControlName="UserName" placeholder="User Name" class="form-control" aria-label="Default"
 aria-describedby="inputGroup-sizing-default">
 </div>
 <div class="col-md-4">

 <span style="font-weight: bold;color: red;" *ngIf="!registrationForm.controls['UserName'].valid&&registrationForm.controls['UserName'].dirty">
 <span *ngIf="registrationForm.controls.UserName.errors.required">User Name is Required.</span>
 <span *ngIf="registrationForm.controls.UserName.errors.minlength">User name minimum should be
 length
 of 3.</span>
 <span *ngIf="registrationForm.controls.UserName.errors.maxlength">User name maximum should be
 length
 of 50.</span>
 </span>

 </div>
 </div>
 <br>
 <div class="row">
 <div class="col-md-2">
 <label for="FormControlPassword" style="color: lightseagreen;font-size: medium;"><b>Password*:</b></label>
 </div>
 <div class="col-md-6">
 <input type="password" formControlName="Password" placeholder="Password" class="form-control"
 aria-label="Default" aria-describedby="inputGroup-sizing-default">
 </div>
 <div class="col-md-4">
 <span style="font-weight: bold;color: red;" *ngIf="!registrationForm.controls['Password'].valid&&registrationForm.controls['Password'].dirty">
 <span *ngIf="registrationForm.controls.Password.errors.required">Password is Required.</span>
 <span *ngIf="registrationForm.controls.Password.errors.minlength">Password minimum should be length
 of 3.</span>
 <span *ngIf="registrationForm.controls.Password.errors.maxlength">Password maximum should be length
 of 50.</span>
 </span>
 </div>
 </div>
 <br>
 <div class="row">
 <div class="col-md-2">
 <label for="FormControlEmail" style="color: lightseagreen;font-size: medium;"><b>Email*:</b></label>
 </div>
 <div class="col-md-6">
 <input type="email" formControlName="Email" placeholder="Email" class="form-control" aria-label="Default"
 aria-describedby="inputGroup-sizing-default">
 </div>
 <div class="col-md-4">
 <span style="font-weight: bold;color: red;" *ngIf="!registrationForm.controls['Email'].valid&&registrationForm.controls['Email'].dirty">
 <span *ngIf="registrationForm.controls.Email.errors.required">Email is Required.</span>
 <span *ngIf="registrationForm.controls.Email.errors.email">Email is not in correct pattern.</span>
 </span>
 </div>
 </div>
 <br>
 <div class="row">
 <div class="col-md-2">
 <label for="FormControlRole" style="color: lightseagreen;font-size: medium;"><b>Role*:</b></label>
 </div>
 <div class="col-md-6">
 <!-- <input type="text" formControlName="Role" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default"> -->
 <select class="form-control" formControlName="Role" id="exampleFormControlSelect2">
 <option [ngValue]="undefined">Select Role</option>
 <option>Customer</option>
 <option>Sellers</option>
 <option>Tech Support</option>
 <option>CSE</option>
 </select>
 </div>
 <div class="col-md-4">
 <span style="font-weight: bold;color: red;" *ngIf="!registrationForm.controls['Role'].valid&&registrationForm.controls['Role'].dirty&&registrationForm.controls['Role'].touched">
 <span *ngIf="registrationForm.controls.Role.errors.required">Role is Required.</span>
 </span>
 </div>
 </div>
 <br>
 <div class="row">
 <div class="col-md-2">
 <label for="FormControlPhone" style="color: lightseagreen;font-size: medium;"><b>Phone No*:</b></label>
 </div>
 <div class="col-md-6">
 <input type="text" formControlName="Phone" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
 </div>
 <div class="col-md-4">
 <span style="font-weight: bold;color: red;" *ngIf="!registrationForm.controls['Phone'].valid&&registrationForm.controls['Phone'].dirty">
 <span *ngIf="registrationForm.controls.Phone.errors.required">Phone is Required.</span>
 </span>
 </div>
 </div>
 <br>
 <div class="row">
 <div class="col-md-2">
 <label for="FormControlGender" style="color: lightseagreen;font-size: medium;"><b>Gender:</b></label>
 </div>
 <div class="col-md-6">
 <!-- <input type="text" formControlName="Gender" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default"> -->
 <select class="form-control" formControlName="Gender" id="exampleFormControlSelect1">
 <option>Select Gender</option>
 <option>Male</option>
 <option>Female</option>
 <option>Not prefer to dislose</option>
 </select>
 </div>
 <div class="col-md-4">

 </div>
 </div>
 </div>
 <button type="button" style="margin-left: 39%;" [disabled]="!registrationForm.valid" class="btn btn-outline-success"
 (click)="OnRegister(registrationForm.value)"><b>Register</b></button>
 </form>

 </ng-template>
 </ngb-tab>
 </ngb-tabset>
 <!-- Tab End Code -->
 </div>

 <!-- Model Footer -->
 <div class="modal-footer">
 <p *ngFor="let alert of alerts">
 <ngb-alert style="width: 758px;" [type]="alert.type" (close)="staticAlertClosed = true"> alert.message </ngb-alert>
 </p>
 </div>

Logically your component B should be like this

class ComponentB 
 constructor(private activeModal: NgbModal) 

 /* close modal instance */
 close() this.activeModal.dismissAll('Reason'); // the component you pass in modalService as container should have NgbModal in constructor

let instance = modalService.show(ComponentB, 'Template-Path-to-HTML');
instance.result.then(() => /* success */, (reason) => /* Reason should be here :-)*/)