@Directive y @Component en Angular: ¿cuál es la diferencia y cuándo usar cada uno?

¡Hola a todos! Empecé a estudiar Angular y TypeScript, y al crear mis primeros componentes y directivas me confundí con la diferencia entre los decoradores `@Component` y `@Directive`. En la documentación dice que `@Component` es una subclase de `@Directive`, pero en la práctica se usan de manera diferente. Por ejemplo, estoy creando un botón simple que cambia de color al pasar el mouse. Puedo hacerlo tanto con un componente como con una directiva. Aquí está mi código: **Opción con @Component:** ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-hover-button', template: `Pasa el mouse`, styles: [` .highlight { background-color: yellow; } `] }) export class HoverButtonComponent { onHover() { /* agregar clase */ } onLeave() { /* quitar clase */ } } ``` **Opción con @Directive:** ```typescript import { Directive, HostListener, HostBinding } from '@angular/core'; @Directive({ selector: '[appHover