Vfrdtyky

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 :-)*/})