Angular:Diretivas

Diretivas de Atributo

Altera a aparência ou comportomaneto de um elemento

ngClass

Adiciona ou remove uma classe

public vActive:boolean = true; (TS)
[p ngClass="{active: vActive, 'disabled': !vActive}"]NgClass[/p] (HTML)

ngStyle

Adiciona ou remove um conjunto de estilos HTML

public altura:string = "200px"; (TS)
public backgroundColor:string = '#00ff00"; (TS)
[p [ngStyle]="{'height': altura, 'background': backgroundColor}"> ngClass [/p] (HTML)

ngModel

Adiciona vinculação de dados bidirecionais a um elemento de formulário HTML

import { FormModels } from '....';

No arquivo app-module.ts
 imports: [ FormsModule ]

ng-Template

Rederiza um elemento no HTML condicional, o default é não mostrar

[ng-template [ngIf]="true"]
   [p]Template[/p]
[/ng-template]

ngFor

[ng-template ngFor let-item [ngForOf]="Lista"]
   [p]Template[/p]
[/ng-template]

ng-Content

Organizar elementos na página

[ng-content select="hr"][/ng-content]

[ng-content select="h1"][/ng-content]

Diretivas Estruturais

ngIf

 TEXTO  (HTML)
public mostraTexto:boolean = true; (TS)

ngFor

[ul]
  [li *ngFor="let item of list; let i = index" (click)="showItem(i);"]{ { i } } =  { { item.nome } }[/li]
[/ul]

public showItem(id: number) { console.log }

nfSwitch

[div [ngSwitch="'nome'"]
  [p *ngSwitchCase="'nome'"]NOME[/p]
[/div]

Pipes

Uppercase

{ { item.nome | uppercase } }

Date

public date: Data = new Date(); (TS)
{ { date | date:'dd/MM/yyyy'} }