Como mostrar um diálogo modal em Angular

O uso de caixas de diálogo modais em aplicativos da Web é bastante comum. Se você deseja editar um registro em uma tabela sem navegar para uma página diferente, procurar alguns dados ou apenas mostrar uma mensagem de aviso para seus usuários, usar um diálogo modal pode ser uma ótima experiência para o usuário. Infelizmente, fazer isso não é muito fácil no Angular sem uma biblioteca de terceiros. Requer escrever algum código não trivial e entender os mecanismos internos da estrutura Angular. Essa é a razão pela qual desenvolvemos uma biblioteca no Developer Partners para mostrar caixas de diálogo modais em Angular. Vamos usar nossa biblioteca neste artigo.

1. Instale a Biblioteca

Teremos que instalar nossa biblioteca @developer-partners/ngx-modal-dialo g via NPM e incluí-la em nossos módulos Angular para poder usá-la. Aqui está o comando NPM para instalá-lo:

npm install @developer-partners/ngx-modal-dialog

Em seguida, temos que incluí-lo nos módulos Angular onde temos que usar diálogos modais. Nosso aplicativo de demonstração é muito pequeno, possui apenas um módulo chamado AppModule. Temos que incluir o ModalModule da biblioteca no array imports do nosso módulo AppModule Angular:

Estamos todos prontos. Podemos começar a usar o componente de diálogo modal em nosso aplicativo.

2. Mostrar uma caixa de diálogo modal

Conforme mencionado anteriormente, mostraremos nosso diálogo modal quando quisermos adicionar ou editar um livro em nossa lista de livros. Vamos primeiro criar um componente onde vamos mostrar a lista de livros. Vamos criar um novo componente Angular e chamá-lo de BookListComponent .

Este é o conteúdo da classe BookListComponent Typescript:

Nossa classe BookListComponent usa uma lista codificada de livros como dados para mostrar em nossa tabela para simplificar. Ele também precisa do serviço ModalService Angular da biblioteca ngx-modal-dialog para poder mostrar os diálogos modais, por isso o injetamos em nosso construtor.

A seguir, criaremos o arquivo HTML para BookListComponent onde mostraremos a lista de livros em uma tabela HTML:

O código HTML acima é bem simples. Ele mostra a lista de livros em uma tabela. Ele também tem um botão chamado "Adicionar novo livro".

É assim que a interface do usuário se parece até agora:

Quando o botão "Adicionar novo livro" é clicado, ele chama a função createBook em nossa classe Typescript. A função createBook mostra a caixa de diálogo modal para adicionar um novo livro à nossa tabela. Este é o código Typescript da função createBook :

A função createBook mostra o diálogo modal chamando a função show da classe ModalService . A função show leva 2 parâmetros: a classe do componente Angular para mostrar dentro da caixa de diálogo modal e as opções da caixa de diálogo modal que são as configurações da caixa de diálogo, como título, tamanho, posição e algumas outras coisas. A caixa de diálogo modal precisa de um componente Angular para ser exibido em seu corpo. Sem esse componente, nosso diálogo modal seria apenas um painel vazio sobrepondo a tela. Esse componente é CreateEditBookComponent , que é o primeiro parâmetro da função show na captura de tela acima.

O componente Angular CreateEditBookComponent será responsável por adicionar e editar livros. Começaremos trabalhando no código para adicionar novos livros. Aqui está o código HTML do CreateEditBookComponent que possui apenas alguns campos para inserir o ID e o título do livro que queremos criar e possui botões para fechar a caixa de diálogo e salvar os dados:

É assim que a interface do usuário do diálogo modal se parece:

Aqui está o código Typescript do componente CreateEditBookComponent:

O componente CreateEditBookComponent usa um serviço Angular chamado ModalReference do ngx-modal-dialog biblioteca. Usamos esse serviço para interagir com o diálogo modal onde nosso componente é colocado, como fechar o modal ou assinar seus eventos. Simplesmente fechamos a caixa de diálogo modal na função de cancelamento na captura de tela acima. Chamamos a função cancelar quando o botão "Cancelar" do HTML é clicado. Quando clicamos no botão "Salvar" no código HTML, ele envia o formulário que chama a função saveData . Na função saveData , fechamos a caixa de diálogo modal como na função cancel , mas também passamos a propriedade do livro para ela, que contém os dados para adicionar um novo livro à nossa lista.

O serviço ModalReference é um tipo genérico. Quando chamamos a função closeSuccess do serviço ModalReference , devemos passar um objeto do mesmo tipo como seu parâmetro genérico. No nosso caso, é uma interface Typescript chamada Book . O parâmetro que passamos para a função closeSuccess é passado de volta para o componente que criou o diálogo modal chamando a função show da classe ModalService .

Ao chamar a função closeSuccess do serviço ModalReference, ele fecha a caixa de diálogo modal e aciona um evento RxJS passando o livro recém-criado para os assinantes desse evento. Na captura de tela acima, o parâmetro newBook de nossa função de retorno de chamada é o livro recém-criado que recebemos da caixa de diálogo modal, então simplesmente o adicionamos à nossa matriz de livros para mostrá-lo na interface do usuário.

3. Passando dados para caixas de diálogo modais

Existem alguns casos em que você precisa passar alguns dados para caixas de diálogo modais. Por exemplo, se queremos editar um livro da lista, podemos passar o registro do livro que queremos editar ao diálogo modal para obter os dados iniciais que queremos modificar.

Vamos começar adicionando um botão às linhas da tabela para editar os dados da linha:

É assim que a interface do usuário se parece com o botão Editar em cada linha da tabela:

A função editBook tem quase o mesmo código que a função createBook com apenas uma diferença importante. Ele passa o livro que queremos editar para o diálogo modal usando a propriedade model das opções do diálogo.

O parâmetro que passamos para o diálogo modal usando a propriedade model fica disponível no serviço ModalReference no componente usado dentro do diálogo por meio de sua propriedade config.model .

Na captura de tela acima, estamos copiando o parâmetro passado e atribuindo-o à propriedade book do componente CreateEditBookComponent . A propriedade model do objeto ModalReference.config é passada por referência, portanto qualquer alteração que fizermos nas propriedades desse objeto será refletida na tabela onde mostramos a lista de livros. A razão pela qual o copiamos é para não modificar a linha na tabela até que o usuário clique no botão "Salvar". Se o usuário clicar no botão "Cancelar", os dados da tabela não serão atualizados.

É assim que a caixa de diálogo modal Editar livro se parece:

Conclusão

Construir uma caixa de diálogo modal para Angular do zero não é fácil, mas é muito mais fácil com nossa biblioteca de caixas de diálogo modal. Passamos por como configurar a biblioteca e usá-la para mostrar caixas de diálogo modais em seu projeto. Passamos pela maioria dos casos de uso básicos e recursos dos diálogos, mas a biblioteca @developer-partners/ngx-modal-dialog tem muitos outros recursos que você pode achar úteis em seus projetos reais.

Por favor, siga o link abaixo para saber mais sobre isso:

@developer-partners/ngx-modal-dialog

Caso você queira mostrar um bom spinner de carregamento em suas caixas de diálogo modais, consulte nosso artigo sobre como criar um spinner de carregamento em Angular:

Como criar um Spinner de carregamento em Angular