Chamando um Modal em Angular 8,9 ou 10 com Bootstrap, a partir de qualquer componente

Um modal simples é um componente em Angular, e como componente tem suas características e sua forma de controlar. Vamos, então, primeiramente criar o modal:

No prompt do Angular CLI digite:

ng g c meu-modal

no arquivo meu-modal.component.ts escreva:

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from ‘@angular/core’;
import { NgbActiveModal } from ‘@ng-bootstrap/ng-bootstrap’;
/**
* Criado por Jason Chaves Schmidt
* Projeto Meu Modal em Dezembro de 2020
* Esse modal é chamado pelo método open() em outro.component.ts
*/
@Component({
selector: ‘app-meu-modal’,
templateUrl: ‘./meu-modal.component.html’,
styleUrls: [‘./meu-modal.component.scss’]
})
export class MeuModalComponent implements AfterViewInit {
@ViewChild(‘focar’) buttonPraFocar: ElementRef;
constructor(public activeModal: NgbActiveModal) { }
ngAfterViewInit() {
this.buttonPraFocar.nativeElement.focus();
}
}

Observe que o método focus() acima é apenas para que o foco inicie-se sobre o botão Fechar do modal. No próximo arquivo meu-modal.component.html escreva o que você quer que apareça dentro do modal:

<div class=”modal-header titulo-modal”>
<div class=”titulo-texto”>
<div>O que são Cookies?</div>
</div>
</div>
<div class=”modal-body”>
Cookies são arquivos que são salvos em seu computador, smartphone ou tablet quando você visita um site.
Usamos os cookies para que o site funcione da melhor forma possível e possamos sempre aprimorar os nossos serviços.
<br><p>
<strong>Cookies Primários</strong>
</p>
Alguns cookies serão colocados em seu dispositivo diretamente pelo nosso site, são os cookies primários. Eles são necessários para você navegar no site e usar seus recursos.
<br><p>
<strong>Cookies de Terceiros</strong>
</p>
Os cookies de terceiros são colocados no seu dispositivo não pelo site que você está visitando, mas por terceiros, como, por exemplo, os sistemas analíticos.
</div>
<div class=”modal-footer”>
<button #focar type=”button” class=”btn” (click)=”activeModal.close()” >Fechar</button>
</div>

Agora alguns ajustes de CSS (que você vai querer fazer do seu jeito, sem problemas).

.titulo-modal {
color: #aa1423;
background-color: #eee;
border-color: #aa1423;
border-style: solid;
border-width: 0 0 2px;
}
.titulo-texto {
width: 100%;
text-align: center;
font-weight: 500;
font-size: 1.5rem;
}
.modal-body {
text-align: justify;
}
.position-modal {
z-index: 99999;
}
.backdrop-modal {
background-color: #090816;
z-index: 99999 !important;
}

Pronto. Nosso modal já existe e é plenamente funcional, só precisamos fazer a parte mais importante saber controla-lo. Dentro de uma outra página ou componente qualquer coloque dois métodos simples que controlam o modal:

import { ModalDismissReasons, NgbModal, NgbModalOptions } from ‘@ng-bootstrap/ng-bootstrap’;
public comoFechouModal: string = '';
private opcoesModal: NgbModalOptions =
{
backdrop: ‘static’,
centered: true,
backdropClass: ‘backdrop-modal’,
windowClass: ‘position-modal’
};
constructor(
.
.
.
.
private modalService: NgbModal
) { }
open() {
this.modalService.open(MeuModalComponent, this.opcoesModal)
.result.then((result) => {
this.comoFechouModal += `Fechado pelo ${result}`;
}, (reason) => {
this.comoFechouModal += `Dispensado ${this.getDismissReason(reason)}`;
});
console.log(this.comoFechouModal);
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return ‘clicando ESC’;
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return ‘clicando fora’;
} else {
return `por ${reason}`;
}
}

E para chamar a ação de abrir, colocamos no HTML do componente onde colocamos esse código, a seguinte chamada:

<div id=”lgpd-cookie-banner” class=”mensagem”>
Utilizamos cookies para melhorar sua experiência de navegação no nosso site.
Ao utiliza-lo, você concorda com o uso de cookies.
Para mais informações, clique
<a (click)=”open()”>aqui</a>.
</div>

Note que, no HTML do modal há uma tag button com o método (click)=”activeModal.close()”, ali você pode colocar o retorno para informar ao seu sistema quem fechou o modal, por exemplo:

(click)=”activeModal.close(‘ botão Fechar do Modal.’)”

Que vai mostrar no console ao fechar, a mensagem:

Fechado pelo botão Fechar do Modal

Obviamente isso é apenas para fornecer-lhe subsídios para usar o callback de controle do fechamento do Modal chamado “result”, que é uma Promise:

result.then((result) => {
this.comoFechouModal += `fechado por ${result}`;
}

Que é resolvida quando fecha via comando close() e rejeitada quando o modal é fechado clicando fora, ou de qualquer outra forma que não seja o método close().
Outra coisa é a possibilidade de fechar o modal clicando fora dele. Nesse exemplo a opção backdrop: ‘static’ de opcoesModal está impedindo isso, para habilitar mude o valor de backdrop de ‘static’ para true.

Veja como é simples abrir um modal em Angular. A referência bibliográfica está no website do Angular: https://ng-bootstrap.github.io/#/components/modal/examples

Eu sou Jason Chaves Schmidt, analista de sistemas do CIASC - Centro de Informática e Automação do Estado de Santa Catarina S.A.