@Directive vs @Component en Angular: ¿cuál es la diferencia y qué elegir para un principiante en 2024?

¿Por qué esta pregunta explota Stack Overflow (y tu cerebro)?

Estás escribiendo tu primer proyecto en Angular. Creas un componente, le pones el decorador @Component — todo funciona. Luego ves en código ajeno @Directive y piensas: «¿Y eso? ¿No es lo mismo?». Spoiler: no, no es lo mismo. Pero la confusión surge en el 90% de los principiantes.

La pregunta «@Directive vs @Component in Angular» ha acumulado miles de visitas en Stack Overflow por una razón. Aclaremos de una vez por todas cuál es la diferencia, cuándo usar cada uno y cómo no quedar mal en una entrevista. ¡Allá vamos!

¿Qué es @Component? (Spoiler: también es @Directive)

Para empezar, una revelación. @Component es un subtipo de @Directive. Sí, oíste bien. Cualquier componente en Angular es una directiva. Pero con una diferencia importante: el componente tiene una plantilla (template).

El decorador @Component hereda todo de @Directive y añade su «característica especial»: la capacidad de renderizar HTML. Si la directiva es «comportamiento», el componente es «comportamiento + un fragmento de interfaz».

Ejemplo de un componente simple en TypeScript

import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-hello',\n  template: `<h1>¡Hola, {{name}}!</h1>`,\n  styles: ['h1 { color: blue; }']\n})\nexport class HelloComponent {\n  name: string = 'Mundo';\n}\n

Aquí HelloComponent es un componente completo. Tiene su propia plantilla, estilos y lógica. Puede usarse en otra plantilla como <app-hello></app-hello>.

¿Qué es @Directive? (Comportamiento puro)

Una directiva es una clase con el decorador @Directive que modifica el comportamiento o la apariencia de un elemento DOM existente. La directiva no tiene su propia plantilla. No crea un nuevo elemento — se «engancha» a uno ya existente.

En Angular hay tres tipos de directivas:

\n
• Componentes (sí, también son directivas) — con plantilla.
\n
• Directivas estructurales — modifican la estructura del DOM (*ngIf, *ngFor).
\n
• Directivas de atributo — cambian la apariencia o el comportamiento de un elemento (ngClass, ngStyle).
\n

Ejemplo de una directiva de atributo en TypeScript

import { Directive, ElementRef, HostListener } from '@angular/core';\n\n@Directive({\n  selector: '[appHighlight]'\n})\nexport class HighlightDirective {\n  constructor(private el: ElementRef) {}\n\n  @HostListener('mouseenter') onMouseEnter() {\n    this.el.nativeElement.style.backgroundColor = 'yellow';\n  }\n\n  @HostListener('mouseleave') onMouseLeave() {\n    this.el.nativeElement.style.backgroundColor = null;\n  }\n}\n

Esta directiva resalta el elemento en amarillo al pasar el ratón. No crea un nuevo nodo DOM — «modifica» el existente. Se usa así: <div appHighlight>Pasa el ratón sobre mí</div>.

Diferencias clave entre @Directive vs @Component

Vamos a desglosarlo. Aquí tienes una tabla que te ayudará a recordar la diferencia de una vez por todas:

Característica	@Component	@Directive
Presencia de plantilla (template)	✅ Sí, obligatorio	❌ No
Crea un nuevo elemento DOM	✅ Sí (a través del selector)	❌ No (se aplica a uno existente)
Presencia de estilos (styles)	✅ Sí, se pueden aislar	❌ Blogs Monorepositorio con Kotlin: organización del código en la práctica Book Recommendations Go Profesional (Golang): técnicas avanzadas Algoritmos y estructuras de datos en JavaScript (Node.js) JavaScript: Guía Completa Kotlin para Android: guía para principiantes Leer también DSL en Kotlin: cómo crear tu propio lenguaje de programación en una tarde Cómo leer InputStream a String en Java: mejores prácticas 2025 Cómo obtener nombres de enum en TypeScript: magia bajo el capó Microservicios en Go: arquitectura y práctica de nivel avanzado IN() y PDO: cómo vincular un array correctamente. Errores comunes 🍪 Сначала примите условия Чтобы войти на сайт, необходимо принять соглашение об использовании файлов cookie. Мы используем их для авторизации и улучшения работы сайта. Политика конфиденциальности Принять и продолжить Закрыть 🍪 Мы используем файлы cookie для авторизации, аналитики и улучшения работы сайта. Продолжая пользоваться сайтом, вы соглашаетесь с нашей политикой конфиденциальности. Принять Только необходимые