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.

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

Muito longo; Para ler

Making security fun one episode at a time

Como mostrar um diálogo modal em Angular

Muito longo; Para ler

Developer Partners

STORY’S CREDIBILITY

AI-assisted

Guide

Vested Interest

About Author

Rótulos

Languages

ESTE ARTIGO FOI APRESENTADO EM...

Como mostrar um diálogo modal em Angular

Muito longo; Para ler

Developer Partners

STORY’S CREDIBILITY

AI-assisted

Guide

Vested Interest

About Author

Rótulos

Languages

ESTE ARTIGO FOI APRESENTADO EM...

HISTÓRIAS RELACIONADAS