Vad är en Angular-komponent?

Question

Accepted Answer

En **komponent** är den grundläggande byggstenen i Angular UI — en TypeScript **klass** dekorerad med `@Component` som styr en del av skärmen (dess "vy"). Varje Angular-app är ett träd av komponenter. ## Anatomin för en komponent ```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 } ``` Dekoratören `@Component` kopplar samman tre saker: en **selector** (hur du använder det i HTML), en **mall** (markering) och **format** (omfångsat till denna komponent). ## Klassen innehåller logik och data ```html

``` Klassens offentliga egenskaper och metoder är direkt tillgängliga i dess mall via binding — detta är kärnan i hur Angular ansluter data och vy. ## Använda en komponent ```html ``` ## Format är inkapslade som standard ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular omsluter komponentformat automatiskt (View Encapsulation), så CSS läcker inte mellan komponenter. ## Varför det är viktigt Komponenter är hur du strukturerar varje Angular-app — självständiga enheter av mall + logik + omfångsat format, sammansatta i ett träd. Att förstå `@Component`-dekoratören (selector, mall, format) och hur klassens egenskaper/metoder binder till mallen är den absoluta grunden för Angular-utveckling; allt annat bygger på komponentmodellen.