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.
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.