6

Gostaria de saber qual a diferença das declarações de diretivas.

Por exemplo:

ng-for=""
*ngFor="" (o que é esse asterisco?)
ngFor=""
[ngStyle]

Já vi e utilizei dessas formas, mas nao encontrei as diferenças.

0

1 Resposta 1

10

ng-for era usado no AngularJS ou seja versões 1.X

O ngFor sem o asterisco está errado e gera um erro.

O jeito correto de fazer nas versões a partir do angular 2.x é com *ngFor, isto por que o *ngFor assim como o *ngIf e outras são chamadas de diretivas estruturais. Estas diretivas manipulam o dom diretamente por isso o asterisco é uma mensagem para o angular avaliar elas primeiro. Vale lembrar que você não pode usar duas no mesmo elemento.

De acordo com a documentação da tag:

<div *ngIf="hero" class="name">{{hero.name}}</div>

vira

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

ou seja o Angular cria esta tag ng-template ao redor do seu div nesse caso e avalia o if antes de decidir se adiciona ao dom o div ou não. O ng-template é uma tag fantasma que não existe no dom(não atrapalha o css) realmente e faz alguma lógica.

E o [ngStyle] e outro tópico, basicamente você pode linkar uma propriedade de uma tag html a uma variável no seu TypeScript. Por Exemplo: no seu html

<a [href]="minhaUrl">link</a>

no seu component

export class AppComponent {
  minhaUrl='https://google.com'
}

e equivalente a

 <a href="https://google.com">link</a>

Com a vantagem que você pode mudar o valor nesse caso de minhaUrl e a propriedade mudaria de acordo.

Repare que em um caso você passa o nome de uma variável que contem o valor e no outro você passa o valor diretamente.

2
  • 1
    Excelente Eduardo! Era isso mesmo que procurava. Uma duvida: existe ngStyle, sem os colchetes? Ou até mesmo *ngStyle? Commented 14/03/2018 às 17:15
  • @MarcoGarcia não, o que vc pode fazer é [ngStyle]="'valor'" repare nas aspas simples entre as aspas duplas. Commented 14/03/2018 às 22:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .