Τι είναι ένα Angular component;

Question

Accepted Answer

Ένα **component** είναι το θεμελιώδες δομικό στοιχείο μιας Angular διεπαφής χρήστη — μια κλάση TypeScript διακοσμημένη με `@Component` που ελέγχει ένα τμήμα της οθόνης (η "view"). Κάθε Angular εφαρμογή είναι ένα δέντρο από components. ## Ανατομία ενός component ```ts import { Component } from "@angular/core"; @Component({ selector: "app-user-card", // the custom HTML tag: templateUrl: "./user-card.html", // the view (or inline `template: '...'`) styleUrls: ["./user-card.css"], // scoped styles for this component }) export class UserCardComponent { name = "Ann"; // properties → available in the template greet() { return `Hi ${this.name}`; } // methods → callable from the template } ``` Ο διακοσμητής `@Component` συνδέει τρία πράγματα: έναν **selector** (πώς το χρησιμοποιείτε στο HTML), ένα **template** (το markup), και **styles** (περιορισμένα σε αυτό το component). ## Η κλάση περιέχει την λογική και τα δεδομένα ```html

``` Οι δημόσιες ιδιότητες και οι μέθοδοι της κλάσης είναι άμεσα προσβάσιμες στο template μέσω binding — αυτή είναι η ουσία του πώς το Angular συνδέει τα δεδομένα και τη view. ## Χρήση ενός component ```html ``` ## Τα styles είναι ενκαψυλωμένα από προεπιλογή ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Το Angular περιορίζει τα styles του component αυτόματα (View Encapsulation), επομένως το CSS δεν διαρρέει μεταξύ των components. ## Γιατί είναι σημαντικό Τα components είναι ο τρόπος με τον οποίο δομείται κάθε Angular εφαρμογή — αυτόνομες μονάδες template + λογικής + περιορισμένων styles, σύνθετες σε ένα δέντρο. Η κατανόηση του διακοσμητή `@Component` (selector, template, styles) και του πώς τα properties/methods της κλάσης δεσμεύονται στο template είναι το απόλυτο θεμέλιο της ανάπτυξης Angular· όλα τα υπόλοιπα χτίζονται στο μοντέλο component.