@Directive and @Component in Angular: what's the difference and when to use which?

Hello everyone! I started learning Angular and TypeScript, and when creating my first components and directives, I got confused about the difference between the `@Component` and `@Directive` decorators. The documentation says that `@Component` is a subclass of `@Directive`, but in practice they are used differently. For example, I'm creating a simple button that changes color on hover. I can do this both through a component and through a directive. Here's my code: **Option with @Component:** ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-hover-button', template: `Hover`, styles: [` .highlight { background-color: yellow; } `] }) export class HoverButtonComponent { onHover() { /* add class */ }