Angular Directivas estruturais

Quando se trata de controlar a aparência dos elementos da árvore visual no WPF, a forma mais comum é usar o conversor de binding e visibilidade, o que requer alguma lógica extra e recursos estáticos. Angular também possui uma técnica semelhante, que muda a aparência ou o comportamento de um elemento DOM - as diretrizes Angular. Um dos tipos Angulardirectives é ostructural directives– eles mudam o layout do DOM adicionando ou removendo elementos do DOM.

Neste tópico, vamos demonstrar as seguintes três diretrizes estruturais -ngIf,ngSwitch engFor. Como se pode perceber pelos nomes, cada uma dessas pode ser comparada a uma estrutura C#. ÉngIf a mesma coisa que um bloco de código "if-else" em C#, éngSwitch a mesma coisa que a instrução switch-case em C# e, por fim, éngFor exatamente a mesma coisa que um "for-loop" em C#.

ngIf Directive

Vamos explorar cada uma dessas diretrizes, começando pelasngIf Essa diretriz nos permite mostrar ou esconder 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 vai renderizar o nome John. No entanto, digamos que temos algum tipo de expressão booleana na qual queremos basear a condição da visibilidade dessa tag "h2". Por exemplo, vamos adicionar uma propriedade chamada "isFirstName" e defini-la como false. Para dizer que nosso div deve 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 salvarmos os arquivos, e porque isFirstName é falso, veremos que o nome não é mais renderizado no navegador. No entanto, se atualizarmos isFirstName para ser verdadeiro, o primeiro nome "John" será exibido no navegador. Se colocarmos o nome primário de volta como false, notaremos que o primeiro nome não aparece mais no navegador, mas sim vazio. Esse é o comportamento padrão dangif sentença – se a expressão for verdadeira, renderizamos o template fornecido, caso contrário ele fica 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 diga que, se aisFirstName propriedade for falsa, queremos fornecer um sobrenome em vez disso. Para isso, vamos aproveitar a cláusula "else" dangIf diretiva. Vamos começar criando umang-template tag definindo "h2" que contém o sobrenome. Anng-template é simplesmente um marcador de posição que nos permite definir conteúdo que não faz parte do DOM, mas pode ser adicionado via código, como usando angIf diretiva. Mas, para usar isso na diretiva, precisamos dar a ela um nome de variável de referência modelo, como "sobrenome". Agora que nomeamos o nossong-template, vamos na nossangIf diretiva, adicione "; else sobrenome" e salve isso. Como "isNomePrimeiro" é falso, estamos dizendo que 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 mudarmos "isFirstName" para true, o primeiro nome será exibido no navegador. E uma dica final sobre o uso dangIf diretiva é que a expressão não se limita a uma única propriedade – você pode usar múltiplas 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 diretiva que discutiremos é angSwitch diretiva. Isso nos permite comparar uma expressão com múltiplas expressões para decidir quais templates 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 no valor de uma propriedade "make" que definimos em nosso arquivo typescript com o valor padrão "Chevy". Para alcançar isso, precisamos usar angSwitch diretiva com a seguinte sintaxe[ngSwitch] = expression, onde expressão é nossa propriedade "make". Adicionar isso ao elemento "div" que envolve as tags "h2" não é suficiente. Como no WPF, precisamos adicionar algumas instruções "case" a cada elemento "h2". A sintaxe disso é*ngSwitchCase = expression. Neste caso, estamos comparando diretamente com o texto, então vamos adicionar 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 salvarmos, só veremos a opção Chevy renderizada no navegador porque o valor da 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 combinava com nenhuma das nossas condições. Quando normalmente usamos uma instrução switch dentro de C#, temos não só 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á-la com o*ngSwitchDefault que atuará como valor padrão caso nenhum dos outros valores seja 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

A seguir vem angFor diretiva. Essa diretiva nos permite iterar por 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 typescript. Vamos chamar isso de uma variedade de marcas e adicionar Chevy, Ford, GMC e Dodge. Em seguida, vamos criar um "div" e, para cada "div", vamos criar uma tag "h2" que lista o nome dessa marca. Para isso, vamos usar angFor diretiva - a sintaxe para isso*ngFor="let make of makes". Isso nos dá a capacidade de usar interpolação para usar a propriedade "make" definida pela parte "let make" da expressão e imprimir isso na tag "h2".

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

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

Se tudo correr bem, deveríamos ver que para cada item daquele array estamos usando uma tag h2 para representar isso no navegador. Além disso, angFor diretiva fornece alguns itens auxiliares que nos permitem obter mais informações sobre essa coleção, tais 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