¿Qué es un decorador en Angular?
En Angular, un decorador es una función especial de TypeScript que se usa para marcar y configurar clases, métodos o propiedades con metadatos adicionales. Los decoradores permiten a Angular identificar elementos como componentes, servicios y directivas, y definir su comportamiento.
Tipos de decoradores en Angular
1. Decoradores de Clase
Se aplican a clases para indicar su función en la aplicación.
📌 @Component (Para Componentes)
Define un componente Angular.
import { Component } from '@angular/core';
@Component({
selector: 'app-ejemplo',
template: '<h1>Hola Angular</h1>',
styleUrls: ['./ejemplo.component.css']
})
export class EjemploComponent { }
📌 @Directive (Para Directivas)
Define una directiva personalizada.
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appResaltar]'
})
export class ResaltarDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
📌 @Injectable (Para Servicios)
Indica que una clase puede ser inyectada como servicio.
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root' // Disponible en toda la app
})
export class MiServicio {
obtenerMensaje() {
return 'Hola desde el servicio';
}
}2. Decoradores de Propiedad
Se usan para inyectar dependencias o definir entradas/salidas en un componente.
📌 @Input (Recibir datos desde un componente padre)
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-hijo',
template: '<p>{{ mensaje }}</p>'
})
export class HijoComponent {
@Input() mensaje!: string;
}Uso en el componente padre:
<app-hijo [mensaje]="'Hola desde el padre'"></app-hijo>
📌 @Output (Enviar datos a un componente padre)
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-hijo',
template: '<button (click)="enviarMensaje()">Enviar</button>'
})
export class HijoComponent {
@Output() mensajeEnviado = new EventEmitter<string>();
enviarMensaje() {
this.mensajeEnviado.emit('Mensaje desde el hijo');
}
}Uso en el componente padre:
<app-hijo (mensajeEnviado)="recibirMensaje($event)"></app-hijo>3. Decoradores de Método
Modifican el comportamiento de un método.
📌 @HostListener (Escuchar eventos del DOM)
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[appDetectarClick]'
})
export class DetectarClickDirective {
@HostListener('click', ['$event'])
manejarClick(event: Event) {
console.log('Elemento clickeado:', event);
}
}
📌 @HostBinding (Modificar propiedades del DOM)
import { Directive, HostBinding } from '@angular/core';
@Directive({
selector: '[appResaltarTexto]'
})
export class ResaltarTextoDirective {
@HostBinding('style.color') color = 'red';
}Ejemplos de uso
-
@Component→ Define un componente Angular. -
@Injectable→ Crea un servicio inyectable. -
@Input/@Output→ Comunicación entre componentes. -
@HostListener→ Detectar eventos del DOM en directivas.
Jorge García
Fullstack developer