Mudanças entre as edições de "Angular:Diretivas"
Ir para navegação
Ir para pesquisar
(→ngFor) |
|||
| (16 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
| Linha 3: | Linha 3: | ||
==ngClass== | ==ngClass== | ||
Adiciona ou remove uma classe | Adiciona ou remove uma classe | ||
| + | public vActive:boolean = true; (TS) | ||
| + | [p ngClass="{active: vActive, 'disabled': !vActive}"]NgClass[/p] (HTML) | ||
| + | |||
==ngStyle== | ==ngStyle== | ||
Adiciona ou remove um conjunto de estilos HTML | 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== | ==ngModel== | ||
Adiciona vinculação de dados bidirecionais a um elemento de formulário HTML | 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= | =Diretivas Estruturais= | ||
| Linha 15: | Linha 41: | ||
==ngFor== | ==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== | ==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'} } | ||
Edição atual tal como às 13h29min de 18 de junho de 2023
Índice
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'} }
