O uso de caixas de diálogo modais em   é 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   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. aplicativos da Web Angular  1. Instale a Biblioteca  Teremos que instalar nossa biblioteca   via NPM e incluí-la em nossos módulos Angular para poder usá-la. Aqui está o comando NPM para instalá-lo: @developer-partners/ngx-modal-dialo  g   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   Typescript:  BookListComponent  Nossa classe   usa uma lista codificada de livros como dados para mostrar em nossa tabela para simplificar. Ele também precisa do serviço   Angular da biblioteca ngx-modal-dialog para poder mostrar os diálogos modais, por isso o injetamos em nosso construtor. BookListComponent ModalService  A seguir, criaremos o arquivo HTML para   onde mostraremos a lista de livros em uma tabela HTML:  BookListComponent  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   em nossa classe Typescript. A função   mostra a caixa de diálogo modal para adicionar um novo livro à nossa tabela. Este é o código Typescript da função   :  createBook createBook createBook  A função   mostra o diálogo modal chamando a função   da classe   . A função   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 é   , que é o primeiro parâmetro da função   na captura de tela acima. createBook show ModalService show CreateEditBookComponent show  O componente Angular   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:  CreateEditBookComponent  É assim que a interface do usuário do diálogo modal se parece:   Aqui está o código Typescript do componente CreateEditBookComponent:   O componente   usa um serviço Angular chamado   do  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   na captura de tela acima. Chamamos a função   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   . Na função   , fechamos a caixa de diálogo modal como na função   , mas também passamos a propriedade   para ela, que contém os dados para adicionar um novo livro à nossa lista. CreateEditBookComponent ModalReference   ngx-modal-dialog de cancelamento cancelar saveData saveData cancel do livro  O serviço   é um tipo genérico. Quando chamamos a função   do serviço   , devemos passar um objeto do mesmo tipo como seu parâmetro genérico. No nosso caso, é uma interface Typescript chamada   . O parâmetro que passamos para a função   é passado de volta para o componente que criou o diálogo modal chamando a função   da classe   .  ModalReference closeSuccess ModalReference Book closeSuccess show 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   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   para mostrá-lo na interface do usuário. newBook de livros  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   tem quase o mesmo código que a função   com apenas uma diferença importante. Ele passa o livro que queremos editar para o diálogo modal usando a propriedade   das opções do diálogo.  editBook createBook model  O parâmetro que passamos para o diálogo modal usando a propriedade   fica disponível no serviço   no componente usado dentro do diálogo por meio de sua propriedade   .  model ModalReference config.model  Na captura de tela acima, estamos copiando o parâmetro passado e atribuindo-o à propriedade   do componente   . A propriedade   do objeto   é 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. book CreateEditBookComponent model ModalReference.config  É 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.  Também publicado  aqui.  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

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

Learn More

Este áudio é produzido no idioma original da história!

Como mostrar um diálogo modal em Angular

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Criando produtos criptográficos centrados no usuário: a importância do feedback do cliente

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Criando produtos criptográficos centrados no usuário: a importância do feedback do cliente

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps