Hva er en Angular-komponent?

Question

Accepted Answer

En **komponent** er den fundamentale byggeklossen i en Angular UI — en TypeScript **klasse** dekorert med `@Component` som styrer en del av skjermen (sin "view"). Hver Angular-app er et tre av komponenter. ## Anatomi av 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 } ``` `@Component` dekoratøren forbinder tre ting: en **selector** (hvordan du bruker den i HTML), en **template** (oppmuringen), og **styles** (begrenset til denne komponenten). ## Klassen inneholder logikken og dataene ```html

``` De offentlige egenskapene og metodene til klassen er direkte tilgjengelige i malen via binding — dette er kjernen i hvordan Angular kobler data og visning. ## Bruke en komponent ```html ``` ## Stiler er innkapslet som standard ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular omfangskomponentstiler automatisk (View Encapsulation), slik at CSS ikke lekker mellom komponenter. ## Hvorfor det er viktig Komponenter er hvordan du strukturerer hver Angular-app — selvstendige enheter av template + logikk + omfangsbestemte stiler, sammensatt i et tre. Å forstå `@Component` dekoratøren (selector, template, styles) og hvordan klasseegenskapene/metodene binder til malen, er det absolutte grunnlaget for Angular-utvikling; alt annet bygger på komponentmodellen.