Qual é a diferença entre @Directive e @Component no Angular?

Olá a todos! Comecei a estudar Angular e TypeScript recentemente, e fiquei confuso com os decorators @Directive e @Component. Entendo que ambos são usados para criar algum tipo de "entidade" no Angular, mas não compreendo completamente quando usar cada um. Por exemplo, criei um componente simples para exibir um botão: ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-my-button', template: `{{ label }}` }) export class MyButtonComponent { label = 'Clique em mim'; } ``` E depois tentei fazer o mesmo com uma diretiva: ```typescript import { Directive } from '@angular/core'; @Directive({ selector: '[appMyButton]' }) export class MyButtonDirective { // Como adicionar template e estilos aqui? } ``` Li que `@Component` é uma subclasse de `@Directive`, mas na prática eles se comportam de forma diferente. Em `@Directive` não é possível usar `template` e `styles`, enquanto em `@Component` é possível. Para que serve então o `@Directive`?