Angular Directivas estruturais

Quando se trata de controlar a aparência dos elementos da árvore visual no WPF, a maneira mais comum é usar o conversor de associação e visibilidade, o que requer alguns recursos extras de lógica e estática. Angular também possui uma técnica semelhante, que altera a aparência ou o comportamento de um elemento DOM - as diretivas Angular. Um dos Angular directives tipos é o structural directives– eles alteram o layout do DOM adicionando ou removendo elementos DOM.

Neste tópico, vamos demonstrar as três diretrizes estruturais a seguir -ngIf, ngSwitch e ngFor. Como se pode ver por seus nomes, cada um deles pode ser comparado a uma estrutura C#. O ngIf é a mesma coisa que um bloco de código C# "if-else", é ngSwitch a mesma coisa que a instrução switch-case C# e, por último, é ngFor exatamente a mesma coisa que um "for-loop" C#.

ngIf Directive

Vamos explorar cada uma dessas diretivas, começando com o ngIf. Esta diretiva nos permite mostrar ou ocultar elementos com base em uma condição booleana. Começaremos criando um elemento "div" com uma tag "h2" contendo um nome.

<div>
  <h2>John</h2>
</div>

Se salvarmos isso, nosso navegador renderizará o nome John. No entanto, digamos que temos algum tipo de expressão booleana na qual queremos basear a condição de visibilidade dessa tag "h2". Por exemplo, vamos adicionar uma propriedade chamada "isFirstName" e defini-la como false. Para dizer ao nosso div para ser renderizado quando isFirstName for igual a true, devemos usar a seguinte sintaxe *ngIf = "isFirstName".

public isFirstName = false;

<div *ngIf="isFirstName">
  <h2>John</h2>
</div>

Depois de salvar os arquivos, e como isFirstName é falso, veremos que o nome não é mais renderizado no navegador. No entanto, se atualizarmos isFirstName para ser true, o nome "John" será renderizado no navegador. Se definirmos isFirstName de volta como false, notaremos que o primeiro nome não é mais renderizado em nosso navegador, em vez disso, está vazio. Esse é o comportamento padrão da ngif instrução - se a expressão for verdadeira, renderizamos o modelo fornecido, caso contrário, ele estará vazio.

Se fôssemos obter o mesmo comportamento com o WPF, precisaríamos usar um conversor de visibilidade. O código seria semelhante ao seguinte:

public bool IsFirstName { get; set; }
public Sample()
  {
      InitializeComponent();
      this.DataContext = this;
      this.IsFirstName = true;
  }

<UserControl.Resources>
  <BooleanToVisibilityConverter x:Key="VisibleIfTrueConverter" />
</UserControl.Resources>
<Grid>
  <Label Visibility="{Binding Path=IsFirstName, Converter={StaticResource VisibleIfTrueConverter}}">John</Label>
</Grid>

Em Angular, é muito mais fácil e direto.

Vamos criar um requisito que indique que, se a isFirstName propriedade for falsa, queremos fornecer um sobrenome. Para fazer isso, vamos aproveitar a cláusula "else" da ngIf diretiva. Vamos começar criando uma ng-template tag definindo uma tag "h2" que contém o sobrenome. An ng-template é simplesmente um espaço reservado que nos permite definir conteúdo que não faz parte do DOM, mas pode ser adicionado por meio de código, como usar a ngIf diretiva. Mas, para usar isso na diretiva, precisamos dar a ela um nome de variável de referência de modelo, como "sobrenome". Agora que nomeamos nosso ng-template, vamos entrar em nossa ngIf diretiva, adicionar "; else sobrenome" e salvá-lo. Como "isFirstName" é falso, estamos dizendo que senão use o sobrenome, o que significa que estamos usando o modelo com o sobrenome.

<div *ngIf="isFirstName; else lastname">
  <h2>John</h2>
</div>
<ng-template #lastname>
  <h2>Doe</h2>
</ng-template>

Agora, outra maneira de escrever isso é dizer "éNome; depois nome; senão sobrenome". Então, para fazer isso, precisamos criar outro modelo chamado "nome".

<div *ngIf="isFirstName; then firstname; else lastname">
</div>
<ng-template #firstname>
  <h2>John</h2>
</ng-template>
<ng-template #lastname>
  <h2>Doe</h2>
</ng-template>

Se alterarmos "isFirstName" para true, o primeiro nome será renderizado no navegador. E uma dica final sobre como usar a ngIf diretiva é que a expressão não se limita a uma única propriedade - você pode realmente usar várias propriedades e/ou funções, desde que a expressão como um todo retorne um resultado booleano. Por exemplo, podemos até usar operadores lógicos como" && isValid || getIsValidName()".

ngSwitch Directive

A próxima directiva que discutiremos é a ngSwitch directiva. Isso nos permite comparar uma expressão com várias expressões para decidir quais modelos adicionar ou remover. Digamos que temos elementos "h2" que representam marcas de carros – Chevy, Ford e GMC. Gostaríamos de exibir apenas um desses itens com base em um valor de uma propriedade "make" que definimos em nosso arquivo datilografado com um valor padrão de "Chevy". Para conseguir isso, precisamos usar a ngSwitch diretiva com a seguinte sintaxe [ngSwitch] = expression, onde expression é nossa propriedade "make". Adicionar isso ao elemento "div" envolvendo as tags "h2" não é suficiente. Como no WPF, precisamos adicionar algumas instruções "case" a cada elemento "h2". A sintaxe para isso é *ngSwitchCase = expression. Nesse caso, estamos comparando diretamente com o texto, portanto, adicionaremos aspas simples ao redor do valor, o que significa que o resultado final seria *ngSwitchCase = "'Chevy'" /semelhante para os outros dois valores/.

make = "Chevy";

<div [ngSwitch]="make">
  <h2 *ngSwitchCase="'Chevy'">Chevy</h2>
  <h2 *ngSwitchCase="'Ford'">Ford</h2>
  <h2 *ngSwitchCase="'GMC'">GMC</h2>
</div>

Depois de salvar isso, veremos apenas a opção Chevy renderizada no navegador porque o valor de nossa propriedade "make" está definido como "Chevy". Se mudarmos, para dizer "GMC", e salvarmos isso, apenas a opção GMC será renderizada no navegador. Agora, o que acontece se adicionarmos uma opção que não está disponível, digamos o "Lambo". Nada seria renderizado porque isso não correspondia a nenhuma de nossas condições. Quando normalmente usamos uma instrução switch dentro do C#, temos não apenas o caso, mas também o valor padrão. O mesmo está disponível em Angular– podemos adicionar outra opção com o texto "Não encontrado" e marcá-lo com o *ngSwitchDefault que atuará como o valor padrão se nenhum dos outros valores for encontrado.

<h2 *ngSwitchDefault>Not Found</h2>

Nesse caso, se estivermos procurando por Lambo, não temos a opção Lambo, então mudamos para o caso padrão que é "Não encontrado" e "Não encontrado" é renderizado em nosso navegador. Uma coisa que precisamos ressaltar é que essas são expressões, então podemos usar até mesmo uma função, desde que ela retorne um resultado que corresponda à expressão que estamos passando. Bem simples!

ngFor Directive

Segue-se a ngFor directiva. Essa diretiva nos permite iterar por meio de uma coleção de objetos e adicionar um modelo para cada item dessa coleção. Vamos começar adicionando uma coleção de objetos em nosso arquivo datilografado. Vamos chamar isso de uma variedade de marcas e adicionar Chevy, Ford, GMC e Dodge. Em seguida, criaremos um "div" e, para cada "div", criaremos uma tag "h2" que lista o nome dessa marca. Para o fazer, vamos utilizar a ngFor directiva - a sintaxe para isso *ngFor="let make of makes". Isso nos dá a capacidade de usar a interpolação para usar a propriedade "make" que é definida por meio da parte "let make" da expressão e imprimi-la na tag "h2".

makes = ["Chevy", "Ford", "GMC", "Dodge"];

<div *ngFor="let make of makes">
  <h2>{{ make }}</h2>
</div>

Se tudo correr bem, devemos ver que, para cada item nessa matriz, estamos usando uma tag h2 para representá-lo no navegador. Além disso, a ngFor diretiva fornece alguns itens auxiliares que nos permitem obter mais informações sobre essa coleção, como:

• "índice como i" - permite determinar qual é o índice de cada item

<div *ngFor="let make of makes; index as i">
  <h2>{{ i }} - {{ make }}</h2>
</div>

• "primeiro como f" - nos permite saber se o item é o primeiro da coleção

<div *ngFor="let make of makes; first as f">
  <h2>{{ f }} - {{ make }}</h2>
</div>

• "Last as L" - você também pode obter a última linha ou o último item da coleção

<div *ngFor="let make of makes; last as l">
  <h2>{{ l }} - {{ make }}</h2>
</div>

• "ímpar como o" ou "par como e" - nos permite determinar se o item da coleção está em uma posição ímpar ou par

<div *ngFor="let make of makes; odd as o">
  <h2>{{ o }} - {{ make }}</h2>
</div>

É assim que é fácil adicionar e remover elementos de sua visualização em seu aplicativo angular - basta usar uma diretiva estrutural e pronto.

Additional Resources

• Desktop para Web: Diretivas Estruturais em Angular
• Angular Directivas estruturais

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub