¿Qué es un componente de Angular?

Question

Accepted Answer

Un **componente** es el bloque de construcción fundamental de una interfaz de usuario Angular — una **clase** de TypeScript decorada con `@Component` que controla una sección de la pantalla (su "vista"). Cada aplicación Angular es un árbol de componentes. ## Anatomía de un componente ```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 } ``` El decorador `@Component` conecta tres cosas: un **selector** (cómo lo usas en HTML), un **template** (el marcado) y **styles** (limitados a este componente). ## La clase contiene la lógica y los datos ```html

``` Las propiedades públicas y métodos de la clase son directamente accesibles en su template a través del binding — esto es el núcleo de cómo Angular conecta datos y vista. ## Usar un componente ```html ``` ## Los estilos están encapsulados por defecto ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular limita automáticamente los estilos de los componentes (View Encapsulation), por lo que el CSS no se filtra entre componentes. ## Por qué es importante Los componentes son cómo estructuras cada aplicación Angular — unidades autónomas de template + lógica + estilos limitados, compuestas en un árbol. Comprender el decorador `@Component` (selector, template, styles) y cómo las propiedades/métodos de la clase se vinculan al template es el fundamento absoluto del desarrollo de Angular; todo lo demás se construye sobre el modelo de componentes.