Angular 5 -  Principais diretivas - I

 Hoje vamos começar a ver como funcionam as principais diretivas do Angular com exemplos práticos.

As diretivas são marcadores em um elemento DOM (como um atributo) que informam ao Angular para anexar um comportamento especificado a um elemento existente.

As diretivas existem desde o AngularJS; na nova versão são usadas com componentes, principalmente para criar tags personalizadas em uma aplicação Angular. Existem muitas diretivas prontas que podemos usar e também podemos criar nossas próprias diretivas.

Algumas diretivas podem mudar completamente a estrutura da saída do template do componente. Essas diretivas podem alterar o layout do DOM adicionando e removendo elementos DOM de visualização. Podemos classificar essas diretivas em estruturais :

Outras diretivas podem simplesmente alterar a aparência dos itens gerados pelo modelo. Vamos chamar essas diretivas não estruturais :

A seguir vamos abordar as principais diretivas mostrando o seu funcionamento.ajustados.

Obs: Para poder criar o exemplo você precisa ter instalado no Angular CLI : npm install -g @angular/cli

Recursos usados:

1 - Diretiva ngIf

Esta é uma diretiva que você adiciona a um elemento na marcação, geralmente para um elemento de contâiner como um div.

Então, a diretiva ngIf é usada para incluir ou excluir um elemento da interface do usuário, incluindo os elementos filhos do elemento. A marcação excluída por uma diretiva ngIf não será invisível, apenas não estará no DOM.

Vejamos como ela funciona...

Neste exemplo vamos usar a diretiva ngIf para ocultar e exibir elementos.

Criando a aplicação Angular

Abra um prompt de comandos e digite o comando a seguir para criar a aplicação Angular : ng new diretiva1

Utilizamos o comando ng new para criar um novo projeto em Angular.

Podemos definir outros parâmetros neste comando como evitar a criação de arquivos de testes :  ng new projeto --skip-tests

A seguir entre na pasta do projeto criado e digite o comando para abrir o projeto no VS Code : code .

A seguir no VS Code abra o arquivo app.component.ts na pasta src/app e inclua o código abaixo:

Depois abra o arquivo app.component.html na pasta pasta e substitua o código deste arquivo pelo mostrado a seguir:

Temos duas tags <div> , uma contendo o nome e a outra o email, onde incluímos a diretiva *ngIf :

Como a função alternar() retorna false/true isso vai ocultar e exibir o conteúdo das divs.

Para testar digite o comando para ng serve para iniciar um servidor HTTP rápido e leve para testar a aplicação:

Por padrão, o servidor é criado escutando na porta 4200, mas podemos alterar esse valor usando o parâmetro -port : Ex: ng serve -port 7000

Abrindo o navegador em http://localhost:4200 teremos nossa aplicação exibida.

Dessa forma ao clicar no botão com o texto 'Alternar' vamos exibir o nome e o email alternadamente graças à diretiva ngIf:

Na segunda parte do artigo vamos abordar a diretiva ngFor.

Aguarde...

Pegue o código dos componentes: app-component.zip

(Disse Jesus) "Na verdade, na verdade vos digo que quem ouve a minha palavra, e crê naquele que me enviou, tem a vida eterna, e não entrará em condenação, mas passou da morte para a vida."
João 5:24

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti