CODEWITHSUNDEEP
bootstrap-modalangular7ng-bootstrap
Héctor Cervera Panella
Héctor Cervera Panella

Reputation: 33

How to close ng-Bootstrap modal on open inside modal

I have a modal inside a modal. Is a stacked modal I assume, but without the syntax of ng-bootstrap for stacked modals.

When I click in a link of the first modal, opens the inside modal, but doesn't close the previous one, and that's what I want to do,

I've created a modal component called app-login which is inside a header component button.

header.component.html

<li class="nav-item mt-1">
   <app-login></app-login>
</li>

The relevant content of this modal is:

login.component.html

<ng-template #content let-modal>
...
<small class="form-text text-muted text-left">
    <app-recuperar></app-recuperar>
</small>
...
</ng-template>

<button class="btn btn-outline-dark text-light mt-1" (click)="openVerticallyCentered(content)"> Entrar
  <i class="fas fa-sign-in-alt fa-fw text-light"></i>
</button>

login.component.ts

import { Component, OnInit } from '@angular/core';
import {NgbModal} from "@ng-bootstrap/ng-bootstrap";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  closeResult: string;

  constructor(private modalService: NgbModal) {}

  openVerticallyCentered(content) {
    this.modalService.open(content, { centered: true });
  }

  ngOnInit() {
  }
}

Where app-recuperar is the inside modal

recuperar.component.html

<ng-template #content let-modal>
...
    <a href="#" (click)="openVerticallyCentered(content)"> Recuperar contraseña</a>
...
</ng-template>

<a href="#" (click)="openVerticallyCentered(content)"> Recuperar contraseña</a>

recuperar.component.ts

import { Component, OnInit } from '@angular/core';
import {NgbModal} from "@ng-bootstrap/ng-bootstrap";

@Component({
  selector: 'app-recuperar',
  templateUrl: './recuperar.component.html',
  styleUrls: ['./recuperar.component.scss']
})
export class RecuperarComponent implements OnInit {

  closeResult: string;

  constructor(private modalService: NgbModal) {}

  openVerticallyCentered(content) {
    this.modalService.open(content, { centered: true });
  }

  ngOnInit() {
  }

}

Everything works fine, both modals are displayed, but the problem is that the second model is done in order to recovery a password, so doesn't make any sense that the login.component remains visible. And the inside modal simply places over the first.

The idea is that when I click on the link of recuperar.component.html, first closes the activeModal and at the same time opens the new modal. Something like that (I know the syntax is wrong):

<a href="#" (click)="activeModal.close();openVerticallyCentered(content)"> Recuperar contraseña</a>

Upvotes: 1

Views: 1199

Answers (1)

Bastien
Bastien

Reputation: 634

Maybe you can close the modal and the open the other the modal from your parent component. To do that, you can pass a parameter when you closed it:

activeModal.close(true);

And then check this value to open the other modal in header.component.ts:

const modalRef = this.modalService.open(content, { centered: true });
modalRef.result.then((recuperar) => {
  if (recuperar) {
    this.modalService.open(RecuperarComponent, { centered: true })
  }
}

In this case you don't need to add the <ng-template> tag in recuperar.component.html, and this component should be in the entryComponent of your module.

Upvotes: 1

Related Questions