Componentes Standalone

Qué es un componente y sus propiedades

Un componente es la unidad fundamental de construcción en Angular. Se trata de una clase TypeScript que controla una parte específica de la interfaz de usuario, combinando lógica de presentación con su correspondiente plantilla HTML y estilos CSS.

Cada componente encapsula tanto el comportamiento como la apariencia de una sección de nuestra aplicación. Por ejemplo, un componente puede representar un botón, un formulario de contacto, una barra de navegación o incluso una página completa.

Anatomía de un componente

Un componente Angular se compone de tres elementos principales:

• Clase TypeScript: Contiene la lógica del componente, propiedades y métodos
• Plantilla HTML: Define la estructura visual del componente
• Estilos CSS: Determinan la apariencia visual del componente

Estos elementos se conectan mediante el decorador @Component, que proporciona metadatos esenciales que Angular necesita para procesar el componente correctamente.

Para crear un componente podemos usar Angular CLI con el comando ng generate component o ng g c:

Esto crea automáticamente toda la estructura de archivos del componente:

El decorador @Component

El decorador @Component es el que transforma una clase TypeScript común en un componente de Angular. 

Este decorador acepta un objeto de configuración con múltiples propiedades que definen cómo debe comportarse el componente.

Ejemplo:

Otro ejemplo en código:

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

@Component({
  selector: 'app-ejemplo',
  template: '<h1>¡Hola Angular!</h1>',
  styles: ['h1 { color: blue; }']
})
export class EjemploComponent {
  // Lógica del componente
}

Propiedades principales del decorador @Component

• selector: Define el nombre del elemento HTML personalizado que representa al componente. Es como creamos nuestras propias etiquetas HTML.

@Component({
  selector: 'app-header'
})

Se usaría en el HTML como: <app-header></app-header>

• template: Contiene directamente el HTML del componente como una cadena de texto. Es útil para plantillas simples y cortas.

@Component({
  template: `
    <div>
      <h2>Mi Componente</h2>
      <p>Contenido del componente</p>
    </div>
  `
})

• templateUrl: Especifica la ruta hacia un archivo HTML externo que contiene la plantilla. Se prefiere para plantillas más extensas.

@Component({
  templateUrl: './mi-componente.component.html'
})

• styles: Permite definir estilos CSS directamente como un array de cadenas de texto. Los estilos se aplican únicamente a este componente.

@Component({
  styles: [
    `
      .titulo { 
        color: #333; 
        font-size: 24px; 
      }
      .contenido { 
        margin: 10px 0; 
      }
    `
  ]
})

• styleUrls: Especifica rutas hacia archivos CSS externos. También se pueden incluir múltiples archivos de estilos.

@Component({
  styleUrls: [
    './mi-componente.component.css',
    './estilos-adicionales.css'
  ]
})

Propiedades de configuración avanzadas

• encapsulation: Controla cómo se aplican los estilos CSS del componente. Por defecto, Angular encapsula los estilos para que solo afecten al componente actual.

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

@Component({
  encapsulation: ViewEncapsulation.Emulated // Valor por defecto
})

• changeDetection: Define la estrategia de detección de cambios que Angular utilizará para este componente.

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

@Component({
  changeDetection: ChangeDetectionStrategy.Default
})

Imports en componentes standalone

En Angular moderno, los componentes son standalone por defecto, lo que significa que pueden importar directamente sus dependencias sin necesidad de módulos intermedios.

import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-formulario',
  imports: [CommonModule, FormsModule],
  templateUrl: './formulario.component.html'
})
export class FormularioComponent {
  // Lógica del componente
}

La propiedad imports permite especificar qué módulos, directivas, pipes u otros componentes necesita utilizar este componente específico.

Ejemplo completo de un componente

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

@Component({
  selector: 'app-saludo',
  imports: [CommonModule],  // ← Necesario para ngClass y async pipe o directivas legacy como *ngIf
  template: `
    <div class="saludo-container">
      <h1>{{ titulo }}</h1>
      <p>{{ mensaje }}</p>
      <button (click)="cambiarMensaje()">Cambiar mensaje</button>
    </div>
  `,
  styles: [`
    .saludo-container {
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
    }
    h1 {
      color: #2c3e50;
    }
  `]
})
export class SaludoComponent {
  titulo = 'Mi Primer Componente';
  mensaje = '¡Bienvenido a Angular!';

  cambiarMensaje() {
    this.mensaje = '¡Has hecho clic en el botón!';
  }
}

Este componente define una interfaz simple con un título, un mensaje y un botón que modifica el contenido cuando se hace clic en él. Demuestra cómo la clase del componente maneja el estado y la lógica, mientras que la plantilla se encarga de la presentación visual.

Standalone por defecto

En Angular 20, los componentes son standalone por defecto, lo que representa un cambio fundamental en la arquitectura del framework. Esto significa que ya no necesitas especificar explícitamente standalone: true en el decorador @Component ni crear módulos intermedios para usar tus componentes.

Evolución hacia standalone

Tradicionalmente, Angular requería que los componentes fueran declarados dentro de NgModules para poder utilizarse. Este enfoque, aunque funcional, introducía complejidad adicional y código repetitivo que no siempre aportaba valor real al desarrollo.

// Enfoque tradicional con NgModules (versiones anteriores)
@NgModule({
  declarations: [MiComponente],
  imports: [CommonModule, FormsModule],
  exports: [MiComponente]
})
export class MiModulo { }

@Component({
  selector: 'app-mi-componente',
  templateUrl: './mi-componente.component.html'
})
export class MiComponente { }

Con la introducción de los componentes standalone, Angular eliminó esta capa de abstracción innecesaria, permitiendo que los componentes gestionen directamente sus propias dependencias.

Componentes standalone en Angular 20

En la versión actual, cuando creas un componente, automáticamente es standalone sin necesidad de configuración adicional:

// Angular 20 - Standalone por defecto
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-producto',
  imports: [CommonModule], // Importaciones directas
  template: `
    <div class="producto">
      <h3>{{ nombre }}</h3>
      <p>{{ descripcion }}</p>
      <span class="precio">{{ precio | currency }}</span>
    </div>
  `,
  styleUrls: ['./producto.component.css']
})
export class ProductoComponent {
  nombre = 'Producto de ejemplo';
  descripcion = 'Descripción del producto';
  precio = 29.99;
}

Ventajas de los componentes standalone

Menos código repetitivo: Elimina la necesidad de crear y mantener módulos intermedios para componentes simples, reduciendo significativamente el boilerplate code.

// Antes: Necesitabas un módulo
@NgModule({
  declarations: [HeaderComponent],
  imports: [CommonModule],
  exports: [HeaderComponent]
})
export class HeaderModule { }

// Ahora: Solo el componente
@Component({
  selector: 'app-header',
  imports: [CommonModule],
  template: '<header>Mi Header</header>'
})
export class HeaderComponent { }

Mejor tree-shaking: Angular puede optimizar mejor el bundle final eliminando código no utilizado, ya que las dependencias se declaran explícitamente en cada componente.

Mayor reutilización: Los componentes standalone se pueden utilizar directamente en cualquier parte de la aplicación sin necesidad de importar módulos completos.

// Uso directo en otros componentes
@Component({
  selector: 'app-dashboard',
  imports: [ProductoComponent, HeaderComponent], // Importación directa
  template: `
    <app-header></app-header>
    <main>
      <app-producto></app-producto>
    </main>
  `
})
export class DashboardComponent { }

Gestión de dependencias simplificada

Los componentes standalone gestionan sus dependencias de forma explícita y granular. Cada componente especifica exactamente qué necesita, sin heredar dependencias innecesarias de módulos padre.

@Component({
  selector: 'app-formulario-usuario',
  imports: [
    CommonModule,    // Para directivas básicas como @if, @for
    FormsModule,     // Para ngModel y formularios basados en templates
    ReactiveFormsModule // Solo si necesitas formularios reactivos
  ],
  template: `
    <form>
      <input [(ngModel)]="nombre" name="nombre">
      @if (nombre) {
        <p>Hola, {{ nombre }}!</p>
      }
    </form>
  `
})
export class FormularioUsuarioComponent {
  nombre = '';
}

Compatibilidad y migración

Angular 20 mantiene compatibilidad completa con los módulos existentes, permitiendo una migración gradual. Puedes tener componentes standalone trabajando junto con componentes tradicionales en la misma aplicación.

// Componente standalone usado en un módulo tradicional
@NgModule({
  imports: [
    CommonModule,
    ProductoComponent // Componente standalone importado directamente
  ],
  declarations: [ComponenteTradicional],
  exports: [ComponenteTradicional, ProductoComponent]
})
export class MiModuloMixto { }

Esta flexibilidad facilita la adopción gradual de la nueva arquitectura sin necesidad de reescribir toda la aplicación de una vez.

Configuración en el bootstrap

Los componentes standalone se integran perfectamente con la configuración moderna de Angular en main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

// AppComponent es standalone por defecto
bootstrapApplication(AppComponent, {
  providers: [
    // Configuración de providers globales
  ]
});

Esta aproximación elimina la necesidad del tradicional AppModule, simplificando el punto de entrada de la aplicación y haciendo el código más directo y mantenible.

Nueva nomenclatura

En Angular 20 ha habido un cambio significativo en las convenciones de nomenclatura que elimina la redundancia en los nombres de archivos y clases.

Antes:

# Al crear un componente se generaban archivos con sufijos:
user.component.ts
user.component.html  
user.component.css
user.component.spec.ts

// user.component.ts
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  // ...
}

Ahora:

Los archivos ya no incluyen el sufijo "component" y se simplifican:

# Los nuevos archivos se generan sin sufijos redundantes:
user.ts           # (antes: user.component.ts)
user.html         # (antes: user.component.html)  
user.css          # (antes: user.component.css)
user.spec.ts      # (archivo de testing)

Nueva nomenclatura de clases:

// user.ts
@Component({
  selector: 'app-user',
  templateUrl: './user.html',
  styleUrls: ['./user.css']
})
export class User implements OnInit {  // ¡Ya no se llama "UserComponent"!
  // ...
}

Cambios en servicios

Para servicios, Angular 20 recomienda nombres más específicos basados en dominio:

# Antes:
auth.service.ts → AuthService

# Ahora se prefieren nombres más descriptivos:
auth-store.ts → AuthStore      # Para manejo de estado
user-api.ts → UserApi         # Para llamadas HTTP  
data-access.ts → DataAccess   # Para acceso a datos

Cómo mantener el comportamiento anterior

Si quieres seguir usando la nomenclatura antigua, puedes usar la opción --type=component o configurar el CLI:

# Para generar con nomenclatura antigua:
ng g c user --type=component

# O configurar en angular.json:
"schematics": {
  "@schematics/angular:component": {
    "type": "component"
  }
}

El CLI de Angular 20 usa por defecto la nueva convención de nomenclatura, pero incluye una migración automática que configura los proyectos existentes para mantener la nomenclatura anterior si así lo deseas.

Con estos cambios Angular busca eliminar la redundancia en los nombres - ya no necesitas decir "Component" en el archivo cuando ya está claro por su contexto que es un componente. Es un cambio hacia una nomenclatura más limpia y moderna.