Close ng-bootstrap modal

Question

I am using ng-bootstrap for my angular 4 project and in a section of project I have used modal that include a form, when I submit the form, I want modal to be closed. I have two component for this section :

1: Click to run modal
2: Form validation inside the modal

What can I do ?

my Code is :

<ng-template #signin let-c="close" let-d="dismiss">
    <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div class="row">
            <div class="col-12 mt-5 mn-15px mb-2">
                <div class="wrapper-left-content">
                    <app-login-form></app-login-form>
                </div>
            </div>
        </div>
    </div>
</ng-template>

login.component.html

<form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)" class="form-horizontal">
    <div class="form-group" [ngClass]="{ 'has-error': !(Username.valid || Username.untouched)}">
        <input class="form-control" type="text" [formControl]="Username" placeholder='sample'>
        <div [hidden]="Username.valid || Username.untouched">
            <span class="text-danger" [hidden]="!Username.hasError('required')">
                'sample'
            </span>
        </div>
    </div>
    <div class="form-group" [ngClass]="{ 'has-error': !(Password.valid || Password.untouched)}">
        <input class="form-control" type="Password" [formControl]="Password" placeholder='sample'>
        <div [hidden]="Password.valid || Password.untouched">
            <span class="text-danger" [hidden]="!Password.hasError('required')">
                    'sample' !
            </span>
            <span class="text-danger" [hidden]="!Password.hasError('minLength')">
        'sample' !
            </span>

        </div>
        <a class="fs-12 pull-left my-2" href="#">'sample'؟</a>
    </div>

    <div class="form-group">
        <button type="submit" [disabled]="!loginForm.valid"  class="btn btn-md btn-info btn-block">'sample'</button>
    </div>
</form>

login.component.ts

export class LoginComponent {
  @Output() cancel = new EventEmitter();
  errorMessage: string;

  Username = new FormControl('', [
    Validators.required,
  ]);
  Password = new FormControl('', [
    Validators.required,
    Validators.minLength(6)
  ]);
  loginForm: FormGroup = this.builder.group({
    Username: this.Username,
    Password: this.Password
  });

  constructor(private builder: FormBuilder, private auth: AuthService, private router: Router,
              private toastr: ToastsManager, vcr: ViewContainerRef , public modalService: NgbModal) {
    this.toastr.setRootViewContainerRef(vcr);


  }


  login(values: any) {
    this.auth.login(values)
      .subscribe(
        loggedIn => {
          if (loggedIn) {
            this.router.navigateByUrl('');
            this.toastr.success('sample', null, {toastLife: 4000});
            this.auth.login_again(values)
              .subscribe(
                () => console.log(' login_again is working !')
              );
          }
        },

      );
  }

Answer 1

You have to add a new output to your login-component and emit this output when the user is logged in:

export class LoginComponent {
    @Output() closeModal: new EventEmitter<any>();
...
login(values: any) {
    // add it here when you want the modal closed in every case (also when
    // the login fails)
    this.closeModal.emit();

    this.auth.login(values)
        .subscribe(
    loggedIn => {
      if (loggedIn) {
        this.router.navigateByUrl('');

        // add the "this.closeModal.emit()" here if you want the modal 
        // closed when the user is logged in

        this.toastr.success('sample', null, {toastLife: 4000});
        this.auth.login_again(values)
          .subscribe(
            () => console.log(' login_again is working !')
          );
      }
    },

  );
}

Furthermore you have to listen to this new event in your modal:

<ng-template #signin let-c="close" let-d="dismiss">
<div class="modal-header">
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-12 mt-5 mn-15px mb-2">
            <div class="wrapper-left-content">
                <!-- you can use the assigned variable "c" or "d" from the  
                     ng-template-->
                <app-login-form (closeModal)="c()"></app-login-form>
            </div>
        </div>
    </div>
</div>

The variables c (from let-c="close" ) and d (from let-d="dismiss" ) are methods passed in the template from the ngb-modal. For example you can see a call of the method "d" in the modal header. For more informations see: https://ng-bootstrap.github.io/#/components/modal/examples