Angular Komponensek: A Standalone Éra

A modern Angular (v17+) egyik legnagyobb újítása a Standalone Components bevezetése volt. Felejtsd el a bonyolult NgModule fájlokat! Mostantól minden komponens egy önálló egység, ami egyszerűbbé és érthetőbbé teszi a kódodat.

1. Mi az a Standalone Komponens?

Egy olyan komponens, amely saját maga deklarálja a függőségeit (importjait). Nincs szükség arra, hogy egy modulba regisztráld. Így néz ki a definíciója:

@Component({
  selector: 'app-user-profile',
  standalone: true, // Ez a kulcs!
  imports: [CommonModule, MyButtonComponent],
  template: `<h1>Szia, {{ name }}!</h1>`,
})
export class UserProfileComponent {
  name = 'Fejlesztő';
}

2. Miért jó ez neked?

• Kevesebb "Boilerplate": Nincs többé szükség a végtelen app.module.ts listákra.
• Jobb Tree Shaking: Az Angular csak azt a kódot fordítja be a kész alkalmazásba, amit ténylegesen importálsz.
• Könnyebb tesztelés: A komponensek elszigeteltek, így a unit tesztek gyorsabbak és egyszerűbbek.

3. Input és Output: Adatáramlás

A komponensek közötti kommunikáció alapja az @Input() (adat fogadása) és az @Output() (esemény küldése). Az Angular 22-ben már használhatod a legújabb signal-based inputs formátumot is!

Következő lépés: Ismerd meg a Signalokat, az Angular új reaktív motorját! 🚀