Hvad er en Angular-komponent?

Question

Accepted Answer

En **komponent** er grundlaget for en Angular-brugergrænseflade — en TypeScript **class** dekoreret med `@Component`, der styrer en del af skærmen (dens "view"). Hver Angular-app er et træ af komponenter. ## Anatomi af 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` forbinder tre ting: en **selector** (hvordan du bruger den i HTML), et **template** (markeringen) og **styles** (omfattet af denne komponent). ## Klassen indeholder logik og data ```html

``` Klassens offentlige egenskaber og metoder er direkte tilgængelige i dens template via binding — det er kernen i hvordan Angular forbinder data og view. ## Brug af en komponent ```html ``` ## Typografier er som standard indkapslet ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular omfang komponentstyler automatisk (View Encapsulation), så CSS ikke lækker mellem komponenter. ## Hvorfor det betyder noget Komponenter er hvordan du strukturerer hver Angular-app — selvstændige enheder af template + logik + omfattet styles, sammensat i et træ. At forstå `@Component`-dekoratøren (selector, template, styles) og hvordan klassens egenskaber/metoder bindes til templatet er det absolutte grundlag for Angular-udvikling; alt andet bygger på komponent-modellen.