Para criar componente:
ng g component components/new-component
o arquivo sempre vem com component no final da classe, então pode tirar o
component, ou apagar pois fica NewComponentComponent
Lá no app component ts principal, invés de importar o template url, utilizamos
somente o template: e entre crazes, colocamos o conteúdo html:
template: `
<h1>Curso de Angular</h1>
<app-new-component />
`,
para importar o componente é bem simples, somente colocar <app-new-component />
Interpolação:
depois de criar um componente, é possível passar variaveis, e métodos dentro da
class:
export class TemplateBindingComponent {
public name = 'Dener Troquatte'
sum(num1: number, num2: number){
return num1 + num2
}
}
e chamar isso dentro do html desse component
chamando dentro de chaves duplas {{ sum(1 + 2) }} vai printar 3, por exemplo
Property Binding
é possível colocar propriedades dinamicas, um exemplo muito usado é de botão:
export class TemplateBindingComponent {
public name = 'Dener Troquatte'
sum(num1: number, num2: number){
return num1 + num2
}
isDisabled = true
srcValue = '[Link]'
constructor() {
setTimeout(()=> {
[Link] = false;
}, 1000);
}
}
<button [disabled]="isDisabled">Button</button>
Attribute binding
é bem similar ao property, mas utilizando o attr
<p [[Link]]="name" [[Link]-label]="name">Dener Troquatte</p>
Class and Style Binding
para utilizar os atalhos para class e style, é bem similar:
<p [[Link]-red]="age >= 32" [[Link]-blue]="age >
32">{{ name }}</p>
<p [[Link]-decoration]="isTextDecoration">{{ age }}</p>
lá na classe em ts:
public isTextDecoration = [Link] >= 32 ? 'underline' : 'none';
dessa maneira é possível variar o style conforme muda a variavel
Event Binding
Para fazer eventos dinamicos, é bem simples, por exemplo utilizando funções na
classe:
public somar() {
return [Link]++;
}
public subtrair() {
return [Link]--;
}
e no html:
<button (click)="somar()">+</button>
<button (click)="subtrair()">-</button>
também é possível utilizar eventos do teclado
input([Link].t)="onKeyDown($event)" />
lá no ts:
<input ([Link].t)="onKeyDown($event)" />
dessa maneira é disparado o evento do teclado ao pressionar shift + t
Two Way Binding
Podemos utilizar o ngModel para controlar as funções:
<input [(ngModel)]="name" />
{{ name }}
ao apagar uma letra do nome, vai refletir no nome em baixo, para isso é necessario
importar o ngModules no ts
imports: [FormsModule]
Diretivas de Atributos NgClass e NgStyle
<div [ngClass]="{ 'background-red': age > 35, 'background-blue': age < 35}">
Classes condicionais</div>
<div
[ngStyle]="{
color: age > 35 ? 'green' : 'red', 'font-size': age > 35 ? '10px' : '20px',
}"
>
Estilo dinâmico.
</div>
Template Variables
Uma das formas de pegar valores e elementos das paginas, é utilizando as tamplates
variables, precisa do import { AfterViewInit, Component, ElementRef, ViewChild }
from '@angular/core';
export class TemplateVariablesComponent implements AfterViewInit {
@ViewChild('name') public nameInput!: ElementRef;
@ViewChild('h2') public nameH2!: ElementRef;
@ViewChild(NewComponent) public childComponent!: NewComponent;
ngAfterViewInit() {
[Link]([Link])
[Link]([Link])
[Link]([Link])
}
}
dessa maneira recupera os dados do conteudo do html.
Control Flow
@IF
Para utilizar o if nas novas versões, utilizamos essa estrutura:
@if(isTrue) {
<p>Verdadeiro</p>
} @else {
<p>Falso</p>
}
é bem simples, só colocar a variavel lá na classe
@For
para utilizar o for, utilizamos a sintaxe direta, ou podemos utilizar com um if
@if(loadingData$ | async; as data) {
<ul>
@for(item of data; track item){
<li>{{ item }} - Teste</li>
}
</ul>
} @else {
<p>Carregando...</p>
}
@for(item of loadingData$ | async; track item){
<li>{{ item }}</li>
}
dessa maneira carrega a lista que tem no ts
export class TemplateControlFlowComponent {
public loadingData$: Observable<string[]> = of([
'item 1',
'item 2',
'item 3',
]).pipe(delay(3000));
}
também é possível utilizar os valores
@for (
item of itens; track [Link];
let i = $index;
let c = $count;
let f = $first;
let l = $last;
let e = $even;
let o = $odd;
) {
<p>{{ [Link] }}</p>
<p>index - {{ i }}</p>
<p>count - {{ c }}</p>
<p>first - {{ f }}</p>
<p>last - {{ l }}</p>
<p>even - {{ e }}</p>
<p>odd - {{ o }}</p>
}
<input #name type="text">
<button (click)="addNewName([Link])">Add Name</button>
lá no ts fica assim:
public itens = [{ name: 'Dener Troquatte'}];
public addNewName(value: string){
return [Link]({name: value});
}
assim a cada nome faz uma nova lista
podemos utilizar valores vazios no for, para o caso do back end não trazer dados,
exemplo:
<ul>
@for (item of itens_zerados; track [Link]) {
<li>{{ [Link] }}</li>
} @empty {
<li> Não contém valores </li>
}
</ul>
no ts:
public itens_zerados: Array<{ name: string}> = []
é preciso colocar o tipo no TS.
para utilizar switch:
@switch (switchCondition) {
@case ('A') {
<p>Sim sua letra é: A</p>
}
@case ('B') {
<p>Sim sua letra é: B</p>
}
@default {
<p>Os dados não foram encontrados</p>
}
}
dessa maneira é só por o switchCondition public no ts
Deferrable Views
Para utilizar visualizações conforme carregamento da página, utilizamos isso, o
padrão de código é:
<h2 #trigger>Deferrable Views</h2>
@defer (on timer(5s); on interaction(trigger); on hover;) {
<app-new-component />
} @placeholder() {
<p>Mostrar antes de carregar algo.</p>
} @loading() {
<p>Loading...</p>
} @error {
<p>Loading failed :(</p>
}
o #trigger é um id, quando clicado, dispara a visualização
o placeholder, é o que tem antes de carregar
no defer, é possível colocar on:(idle, timer, viewport, interaction, hover,
immediate, prefetch)
o idle e immediate é após carregar tudo que tem na página, o timer especifica um
tempo, e interaction é quando é clicado no placeholder
também é possivel colocar when, e quando o when for verdadeiro, ocorre o
carregamento, por exemplo:
@defer(when loadingData$ | async)
dessa maneira, lá no ts, onde tem um carregamento de lista, quando carregar a lista
o elemento aparece
em placeholder, é possível colocar um valor minimum, para aparecer por aquele
tempo, mesmo após o efeito de algum trigger
@placeholder(minimum 5s)
dessa maneira, se clicar, antes de 5 segundos, só aparece quando completar 5
segundos.
também podemos utilizar o minimum, e o after no loading, por exemplo
@loading(after 150ms; minimum 4s)
desse jeito se demorar mais de 150ms o download do componente, o loading fica por
4s na tela.
Signals
é uma das principais novidades do angular, permite controlar o DOM de uma maneira
mais prática, utilizando a função signal, quando algo é alterado, a mudança ocorre
em todo o DOM
no ts fica assim:
public firstName = signal('Dener');
public lastName = signal('Troquatte');
public fullName = computed( () => {
return [Link]() + [Link]();
})
public array = signal([1]);
constructor( ) {
public updateName() {
return [Link]("João ");
}
public updateArray() {
[Link]( (oldValue: Array<number>) => {
return [...oldValue, [Link] + 1]
})
}
é preciso colocar o signal, e ao lado o valor
dessa maneira, atualiza o valor geral
<h2>Signals</h2>
<p>{{ firstName() }} {{ lastName() }}</p>
<p>Full Name: {{ fullName() }}</p>
<ul>
@for(item of array(); track item){
<li>{{ item }}</li>
}
</ul>
<button (click)="updateName()"> Update Name </button>
<button (click)="updateArray()"> Update Array </button>
clicando em update name, vai alterar os nomes.
e também utilizamos para arrays.
podemos utilizar o effect para algumas situações dentro do constructor
effect(()=> {
[Link]([Link]())
}
dessa maneira, quando alterado o fullname, vai dar console log dele