Geração de diretivas e pipes no Angular

Name: Geração de diretivas e pipes no Angular
Author: Michaela Ochnich

Este capítulo abrangerá directivas estruturais, directivas de atribuição e tubos. Introduzirá as directivas e tubos fornecidos pela angular. Também demonstrará como podes criar a tua própria classe de tubos com o CLI, bem como uma directiva estrutural e de atributos.

Preview the first lesson free — get full access to all 3 lessons.

Solicitar uma demonstração Entrar

Curso: sob demanda

Esta lição irá mostrar a você como criar um tubo personalizado. Neste caso, um tubo que calcula e exibe a média de uma matriz. Os tubos são usados em modelos angulares para alterar os dados em um formato diferente antes de ser exibido para o usuário. O Angular fornece alguns tubos embutidos diferentes para lidar com a formatação de dados para tipos populares como oitavos, moeda ou porcentagens, bem como revestimento para cordas. Às vezes, você pode precisar criar um tubo personalizado para lidar com a formatação de dados repetida para seus casos de uso específicos. O Angular CLI fornece um esquema para criar esses tubos personalizados. Então, em uma janela de terminal no diretório do aplicativo, você pode executar o comando: ng generate pipe, e o nome do seu tubo. Portanto, este tubo vai receber uma série de números e, em seguida, produza a média dessa matriz. E este comando irá gerar dois arquivos diferentes: um para a classe de pipe e o outro é o arquivo de teste. Ele também modifica o arquivo app.module para declarar o tubo que você acabou de gerar para que possa ser usado no aplicativo. Então, abrindo o arquivo de classe pipe que foi gerado, e isso estará na pasta do aplicativo. Portanto, o arquivo tem este decorador de tubo aqui, e então o seletor que está definido aqui nos metadados é como esse tubo será chamado a partir do modelo. Então, este método de transformação que está definido aqui é o método que o Angular vai chamar quando encontra este tubo. O primeiro parâmetro, valor, é o que está sendo passado para o tubo. Nesse caso, será a matriz de números. E aqui eu defino esse tipo para o valor. Parâmetros opcionais também podem ser definidos para configurar como transformar esse valor. Então, para este tubo, vou adicionar uma variável chamada round, qual será o número de casas decimais para arredondar a média para. E vou definir o valor padrão para este parâmetro opcional para dois. A seguir, adicionarei o código a este método que calcula a média da matriz. Então aqui eu criei uma variável para manter a soma dos elementos e inicializou isso para zero. E, em seguida, percorrendo cada elemento da matriz, vai adicionar o valor desse elemento ao total. E então, no final, ele divide esse total pelo comprimento da matriz de valor. E então, para completar esta função, basta retornar a média arredondada. Agora, com o tubo personalizado concluído, Vou abrir essa classe de componente principal do aplicativo e definir rapidamente uma matriz de números aleatórios para usar. E então, no modelo, Vou passar essa matriz para o tubo personalizado. E mudar para o navegador, você pode ver que a média calculada está sendo exibida aqui, e está sendo arredondado para as duas casas decimais padrão já que não passei esse parâmetro opcional. Agora, voltando ao modelo, Vou passar esse parâmetro opcional e aqui vou definir isso para quatro. E agora voltando para o navegador, essa média agora está sendo exibida arredondado para quatro casas decimais em vez dos dois padrão. Então isso é tudo para esta lição sobre a criação de um tubo personalizado. E na próxima lição, você aprenderá como criar uma diretiva de atributo personalizada.

Intermediário Fornecedor : Michaela Ochnich 3 lições · 18m em Árabe, Alemão, Inglês, Espanhol, Francês, Português, Chinese

Descrição do curso

Este capítulo cobrirá directivas estruturais, diretivas de atributo e pipes. Ele apresentará as directivas e pipes incorporadas fornecidas pelo Angular. Ele também demonstrará como podes criar tua própria classe de pipe usando a CLI, bem como uma directiva estrutural e de atributo.

O Que Você Vai Aprender

Compreender como diretivas e pipes Angular funcionam, incluindo diretivas estruturais, diretivas de atributo e pipes
Usar as diretivas e pipes incorporados fornecidos por Angular
Criar uma classe de pipe customizada usando o Angular CLI
Criar uma diretiva estrutural customizada
Criar uma diretiva de atributo customizada

Principais Conclusões

O capítulo abrange diretivas estruturais, diretivas de atributo e pipes em Angular.
Angular fornece diretivas e pipes incorporados que este capítulo apresenta.
O Angular CLI pode ser usado para gerar uma classe de pipe customizada.
Os aprendizes constroem sua própria diretiva estrutural e diretiva de atributo durante o curso.

Perguntas Frequentes

O que este curso abrange?

Ele abrange diretivas estruturais, diretivas de atributo e pipes, incluindo as diretivas e pipes incorporados fornecidos por Angular, e demonstra como criar sua própria classe de pipe usando a CLI bem como uma diretiva estrutural e uma diretiva de atributo.

O que vou aprender a construir neste curso?

Você aprenderá a criar um pipe customizado, uma diretiva estrutural customizada e uma diretiva de atributo customizada, e compreender como diretivas e pipes Angular funcionam.

Quais lições estão incluídas?

O curso inclui três lições: Criando um Pipe Customizado, Criando uma Diretiva de Atributo e Criando uma Diretiva Estrutural.

Quais habilidades estão associadas a este curso?

O curso está relacionado a Angular (Web Framework), Angular CLI, Angular Components, Angular Material, Angular UI e Ng Controller.

O curso usa alguma ferramenta específica para criar um pipe?

Sim, demonstra como criar sua própria classe de pipe usando o Angular CLI.