Angular Academy · Lección

Creación de componentes standalone

Declare componentes con el indicador standalone.

Creación de componentes standalone es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Crear un componente standalone

Un componente standalone es simplemente una clase decorada con @Component que está marcada como standalone. En Angular v19 y posteriores, esto es el valor predeterminado, por lo que a menudo ni siquiera tiene que escribir la propiedad.

La propiedad standalone

Antes se establecía standalone: true en el decorador. En la v19 y posteriores, los componentes son standalone de forma predeterminada, por lo que la propiedad es opcional.

import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  standalone: true, // optional in v19+
  template: '<h1>Welcome</h1>'
})
export class GreetingComponent {}

Selector

El selector es la etiqueta de elemento personalizada que se usa para colocar el componente en una plantilla, como app-greeting.

// usage in another template:
// <app-greeting></app-greeting>

Plantilla integrada

Use la propiedad template para escribir HTML integrado, ideal para componentes pequeños.

@Component({
  selector: 'app-badge',
  template: '<span class="badge">New</span>'
})
export class BadgeComponent {}

Plantilla externa

Para vistas más grandes, use templateUrl para apuntar a un archivo HTML.

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html'
})
export class ProfileComponent {}

Estilos

Añada estilos específicos del componente con styles (integrados) o styleUrl / styleUrls (archivos externos).

@Component({
  selector: 'app-card',
  template: '<div class="card"></div>',
  styles: ['.card { padding: 16px; }']
})
export class CardComponent {}

Lógica de la clase del componente

El cuerpo de la clase contiene el estado y el comportamiento. Con signals, declare el estado reactivo como campos.

import { Component, signal } from '@angular/core';

@Component({ selector: 'app-counter', template: '<p>{{ n() }}</p>' })
export class CounterComponent {
  n = signal(0);
}

No se necesita ningún módulo

Observe que no hay ningún @NgModule ni ninguna matriz declarations. El componente está listo para importarse donde sea necesario.

Convención de nombres de archivos

La convención de Angular utiliza nombres de archivo como greeting.component.ts, de clase como GreetingComponent y de selector como app-greeting.

Usar un componente dentro de otro

Para usar un componente hijo standalone, impórtelo en la matriz imports del componente padre (lo veremos en la próxima lección) y coloque su selector en la plantilla del padre.

Generar con la CLI

La CLI de Angular genera componentes standalone de forma predeterminada. Al ejecutar ng generate component greeting, se crea automáticamente un esqueleto de GreetingComponent standalone.

Comprobación rápida: crear componentes

Acerca de los valores predeterminados de standalone.

Resumen: crear un componente standalone

Puede crear un componente standalone con @Component y establecer opcionalmente standalone: true (el valor predeterminado en v19 y posteriores). Defina un selector, una template o templateUrl, estilos opcionales y la lógica de la clase. No se necesita ningún NgModule. A continuación: importar dependencias directamente.

Preguntas frecuentes

¿La lección «Creación de componentes standalone» es gratis?

Sí — el texto completo de «Creación de componentes standalone» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Creación de componentes standalone»?

Declare componentes con el indicador standalone. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Creación de componentes standalone»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy