Como usar a diretiva angular incorporada: ngIf, ngFor, ngClass e mais

Você pode adicionar diretivas ao HTML em seu projeto Angular. Alguns controlam a estrutura de sua marcação, enquanto outros se concentram nos atributos.

Este artigo passará pelas seis diretivas Angular mais comuns: ngFor, ngIf, ngClass, ngStyle, ngModel e ngSwitch.

O que são diretivas angulares?

As diretivas Angular permitem que você use instruções if e for loops e adicione outro comportamento ao código HTML de um projeto Angular.

As diretivas estruturais envolvem a estrutura dos elementos HTML. Estes incluem ngIf, ngFor e ngSwitch. As diretivas de atributo envolvem a alteração das propriedades dos elementos HTML. Isso inclui ngStyle, ngClass e ngModel.

Como usar ngIf

Para usar ngIf, você precisará de uma condição para avaliar como true para que um elemento HTML específico seja exibido.

1. Adicione duas variáveis ​​ao seu arquivo TypeScript. Neste exemplo, há uma variável noPlaylists e uma variável para armazenar as listas de reprodução. Esta variável será avaliada como verdadeira se o comprimento da matriz de listas de reprodução for 0.

   noPlaylists: boolean = false;
   listas de reprodução: qualquer = [];
   construtor() { }
    ngOnInit(): void {
    if (this.playlists.length 0) {
    this.noPlaylists = true;
    }
   }
   

2. No HTML, adicione a instrução *ngIf. Se noPlaylists for verdadeiro, a mensagem de erro contida no intervalo abaixo será exibida. Caso contrário, não. Você pode aplicar ngIf a diferentes tipos de Tags HTML.

   
   
   Não há listas de reprodução disponíveis.
   
   
   
   

3. Para adicionar um componente "else" à instrução if, você precisará adicionar o código HTML para a parte "else" em um bloco de modelo.

   
   
   Não há listas de reprodução disponíveis.
   
   
   
   
   
   
   Listas de reprodução encontradas.
   
   
   
   

Como usar o ngFor

Se você precisar repetir um certo número de blocos em uma página, você pode usar a diretiva ngFor.

1. No arquivo TypeScript, adicione itens à matriz.

   listas de reprodução: qualquer = [
    {"name": "Rock", "numberOfSongs": 5},
    {"name": "Contemporâneo", "numberOfSongs": 9},
    {"name": "Popular", "numberOfSongs": 14},
    {"name": "Acústico", "numberOfSongs": 3},
    {"name": "Canções de casamento", "numberOfSongs": 25},
    {"name": "Metal", "numberOfSongs": 0},
   ];
   

2. No arquivo HTML, adicione a instrução *ngFor.

   Listas de reprodução encontradas.
   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} músicas
   
   
   
   
   
   
   

   Dentro do ngFor, você poderá referenciar cada objeto no array usando a variável "playlist". "playlist.name" e "playlist.numberOfSongs" imprimirão ambos os atributos dentro do marcação.

Como usar o ngClass

Você pode alterar a classe de estilo que um determinado div usa, com base em uma condição.

1. Adicione duas classes ao arquivo CSS com estilos diferentes. Você pode adicionar qualquer tipo de Estilo CSS você deseja, como cores de fundo diferentes.

   .songs {
    cor de fundo: #F7F5F2;
   }
   .noSongs {
    cor de fundo: #FFA8A8;
   }

2. Dentro do loop for da etapa anterior, adicione a diretiva de atributo ngClass. [ngClass]="playlist.numberOfSongs > 0? 'songs': 'noSongs'" está usando o mesmo operador ternário que JavaScript e outras linguagens usam.

   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} músicas
   
   
   
   
   

   Se o número de músicas for maior que zero, aplicará a classe "songs" ao div. Isso dará à div uma cor de fundo cinza. Caso contrário, se o número de músicas for zero, ele aplicará a classe "noSongs" ao div. Isso dará à div uma cor de fundo vermelha.

Como usar o ngStyle

Em vez de usar ngClass, você pode usar ngStyle se quiser aplicar estilo in-line em vez de estilo por meio de uma classe.

1. Altere o ngClass da etapa anterior para usar ngStyle.

   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} músicas
   
   
   
   

Tópicos relacionados

• Programação
• Programação
• JavaScript
• HTML
• CSS