Carregando...

Referência de Decorators

Em Angular, os decorators são funções especiais que adicionam metadados a classes, propriedades, métodos ou parâmetros, indicando ao framework como esses elementos devem se comportar. A Referência de Decorators é essencial porque fornece uma visão completa de como estruturar componentes reutilizáveis, gerenciar estado, controlar fluxo de dados e lifecycle de aplicações modernas e SPAs.
Decorators como @Component, @Directive, @Pipe, @Injectable e @NgModule são fundamentais. @Component define elementos de interface, @Directive cria comportamentos customizados, @Pipe transforma dados em templates, @Injectable permite injeção de dependências e @NgModule organiza classes em módulos. Decorators adicionais, como @Input e @Output, facilitam a comunicação entre componentes pai e filho, enquanto @ViewChild e @ContentChild permitem acessar filhos ou conteúdo projetado no template.
Esta referência ensina como aplicar cada decorator seguindo as melhores práticas de Angular, evitando armadilhas comuns, como prop drilling, re-renderizações desnecessárias e mutações de estado. Ao final, o leitor estará apto a aplicar decorators de forma eficiente em projetos reais, garantindo componentes escaláveis, de alta performance e manutenção simplificada.

Exemplo Básico

typescript
TYPESCRIPT Code 
import { Component, Input } from '@angular/core';

@Component({
selector: 'app-user-card',
template: `     <div class="card">       <h2>{{ name }}</h2>       <p>Idade: {{ age }}</p>     </div>
`,
styles: [`     .card {
padding: 16px;
border-radius: 8px;
background-color: #f0f0f0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
}
`]
})
export class UserCardComponent {
@Input() name!: string;
@Input() age!: number;
}

No exemplo acima, o decorator @Component transforma a classe UserCardComponent em um componente reutilizável. O selector define a tag HTML para inserção no template, enquanto template e styles definem a interface e aparência do componente. Os decorators @Input permitem que dados sejam passados do componente pai, evitando prop drilling e simplificando a gestão de estado.
O Angular gerencia automaticamente o ciclo de vida do componente, incluindo inicialização, renderização e destruição. Alterações nas propriedades @Input atualizam automaticamente a view, reduzindo re-renderizações desnecessárias. Este exemplo demonstra como decorators controlam o fluxo de dados, o gerenciamento de estado e a estrutura do componente em projetos reais.

Exemplo Prático

typescript
TYPESCRIPT Code 
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
selector: 'app-counter',
template: `     <div class="counter">       <h3>Contador: {{ count }}</h3>       <button (click)="increment()">+</button>       <button (click)="decrement()">-</button>     </div>
`,
styles: [`     .counter {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
}
`]
})
export class CounterComponent {
@Input() count: number = 0;
@Output() countChange = new EventEmitter<number>();

increment() {
this.count++;
this.countChange.emit(this.count);
}

decrement() {
this.count--;
this.countChange.emit(this.count);
}
}

Advanced Angular Implementation

typescript
TYPESCRIPT Code 
import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';

@Component({
selector: 'app-smart-counter',
template: `     <div class="smart-counter">       <h3>Contador Inteligente: {{ value }}</h3>       <button (click)="increase()">+</button>       <button (click)="decrease()">-</button>     </div>
`,
styles: [`     .smart-counter {
background-color: #e0f7fa;
padding: 16px;
border-radius: 12px;
text-align: center;
}
`]
})
export class SmartCounterComponent implements OnInit, OnChanges {
@Input() value: number = 0;
@Output() valueChange = new EventEmitter<number>();

ngOnInit() {
console.log('SmartCounter inicializado com valor:', this.value);
}

ngOnChanges(changes: SimpleChanges) {
if (changes['value']) {
console.log('Valor alterado:', changes['value'].currentValue);
}
}

increase() {
this.value++;
this.valueChange.emit(this.value);
}

decrease() {
this.value--;
this.valueChange.emit(this.value);
}
}

O SmartCounterComponent utiliza @Input, @Output e hooks de lifecycle como OnInit e OnChanges para gerenciar dados de forma reativa e comunicar alterações ao componente pai. Decorators tornam o componente reutilizável, otimizado e seguro, prevenindo prop drilling e re-renderizações desnecessárias. Esta integração de fluxo de dados e gerenciamento de estado permite a criação de componentes escaláveis e manuteníveis, essenciais em aplicações reais.

Boas práticas incluem usar @Input apenas para dados essenciais e @Output para eventos específicos. Evite alterar diretamente o estado ou usar prop drilling excessivo. Para otimização de performance, considere ChangeDetectionStrategy.OnPush. Utilize ferramentas como Angular DevTools para monitorar lifecycle e EventEmitter. Evite injetar dados inseguros e habilite template checking. O uso correto de decorators garante aplicativos Angular seguros, performáticos e escaláveis.

📊 Referência Completa

Angular Element/Method Description Syntax Example Notes
@Component Define um componente @Component({...}) @Component({ selector:'app-demo', template:'...' }) Decorator mais usado
@Directive Cria diretiva customizada @Directive({...}) @Directive({ selector:'[highlight]' }) Manipula DOM
@Pipe Transforma dados @Pipe({...}) @Pipe({name:'capitalize'}) Para alterar exibição de dados
@NgModule Define módulo @NgModule({...}) @NgModule({ declarations:[], imports:[] }) Organiza componentes
@Injectable Permite DI @Injectable({...}) @Injectable({ providedIn:'root' }) Necessário para injeção de dependências
@Input Entrada do componente @Input() prop:type @Input() title:string Recebe dados do pai
@Output Saída do componente @Output() event=new EventEmitter() @Output() clicked=new EventEmitter() Envia dados ao pai
@HostListener Escuta eventos DOM @HostListener('click') handler(){} @HostListener('window:scroll') onScroll() Binding de eventos
@ViewChild Acesso a filhos @ViewChild(ChildComponent) child!:ChildComponent Manipula instância do filho
@ContentChild Acesso a conteúdo projetado @ContentChild(TemplateRef) tpl!:TemplateRef Gerencia template content
@HostBinding Binding de propriedades @HostBinding('class.active') isActive=true Binding dinâmico do DOM

📊 Complete Angular Properties Reference

Property Values Default Description Angular Support
selector string none Selector do componente todas versões
template string none Template do componente 2+
styles array string[] none CSS do componente
providers array [] Providers de dependência 2+
inputs array [] Lista de @Input 4+
outputs array [] Lista de @Output 4+
animations array [] Animações 4+
changeDetection string 'Default' Estratégia de Change Detection 5+
encapsulation string 'Emulated' Encapsulamento CSS 2+
standalone boolean false Componente standalone 14+
imports array [] Módulos importados 14+
schemas array [] Permite elementos customizados 9+

Aprender a Referência de Decorators capacita desenvolvedores a construir componentes reutilizáveis, otimizados e escaláveis. Esse conhecimento controla fluxo de dados, gerenciamento de estado e ciclo de vida, sendo fundamental para projetos reais. Próximos passos incluem estudar Dependency Injection, lifecycle hooks, Change Detection Strategy e gerenciamento de dados assíncronos com RxJS, consolidando habilidades avançadas em Angular.

Termos de Pesquisa Relacionados

Os usuários também pesquisam este conteúdo usando estes termos:

decorators Angular referência de decorators Angular exemplo @Component Angular data binding Angular lifecycle hooks Angular componentes reutilizáveis Angular gerenciamento de estado Angular otimização performance Angular @Input @Output Angular desenvolvimento SPA Angular Angular DevTools componentes avançados Angular EventEmitter Angular ChangeDetection strategy Angular Angular best practices

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
3
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Angular Tutorial