@Directive e @Component no Angular: qual a diferença e quando usar cada um?

Olá a todos! Comecei a estudar Angular e TypeScript e, ao criar meus primeiros componentes e diretivas, fiquei confuso sobre a diferença entre os decorators `@Component` e `@Directive`. Na documentação diz que `@Component` é uma subclasse de `@Directive`, mas na prática eles são usados de forma diferente. Por exemplo, estou criando um botão simples que muda de cor ao passar o mouse. Posso fazer isso tanto com um componente quanto com uma diretiva. Aqui está meu código: **Opção com @Component:** ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-hover-button', template: `Passe o mouse`, styles: [` .highlight { background-color: yellow; } `] }) export class HoverButtonComponent { onHover() { /* adicionar classe */ } onLeave() { /* remover classe */ } } ``` **Opção com @Directive:** ```typescript import { Directive, HostListener, HostBinding } from '@angular/core'; @Directive({ selector: '[appHover