3.Componentes

Objetivo

Aprender a crear y utilizar componentes en Angular.

Crear un Componente

En la terminal, navega al directorio del proyecto y ejecuta:

ng generate component my-component

Esto generará un nuevo componente llamado my-component en tu proyecto.

Editar el Componente

Abre src/app/my-component/my-component.component.ts y agrega la siguiente lógica:

// Importa el decorador Component desde el paquete @angular/core.
      // Este decorador es esencial para definir componentes en Angular.
      import { Component } from '@angular/core';
      
      // Utiliza el decorador @Component para marcar la clase siguiente como un componente Angular
      @Component({
        // Define el selector que se utilizará para instanciar este componente en una plantilla HTML.
        // En este caso,  será el selector.
        selector: 'app-my-component',
        
        // Especifica la ubicación del archivo de plantilla HTML que define la vista del componente.
        // Este archivo contiene el HTML que se renderizará para este componente.
        templateUrl: './my-component.component.html',
        
        // Especifica la lista de archivos de hoja de estilos CSS que se aplican a este componente.
        // Estos estilos solo se aplicarán a este componente.
        styleUrls: ['./my-component.component.css']
      })
      // Define y exporta la clase del componente.
      // Esta clase contiene la lógica del componente y las propiedades que pueden ser usadas en la plantilla.
      export class MyComponent {
        // Define una propiedad message de tipo string y la inicializa con el valor 'Hola, Mundo!'.
        // Esta propiedad puede ser utilizada en la plantilla HTML del componente para mostrar datos.
        message: string = 'Hola, Mundo!';
      }
      
      

Editar la Plantilla del Componente

Abre src/app/my-component/my-component.component.html y agrega el siguiente contenido:

<p>{{ message }}</p>

Usar el Componente en la Aplicación

Abre src/app/app.component.html y agrega el selector del componente:

<app-my-component></app-my-component>

Conceptos Básicos

Los componentes son la base de las aplicaciones Angular. Cada componente tiene una clase que maneja los datos y la lógica, y una plantilla que define cómo se presenta la vista.



Conceptos Básicos

Los componentes standalone en Angular son aquellos que no requieren estar declarados en un módulo NgModule. Esto facilita el desarrollo de componentes reutilizables y simplifica la gestión de módulos.

Sintaxis de un Componente Standalone

La sintaxis de un componente standalone incluye las propiedades habituales de un componente Angular, como selector, template, y styleUrls, pero también incluye la propiedad standalone: true.

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

@Component({
  selector: 'app-my-standalone-component',
  templateUrl: './my-standalone-component.component.html',
  styleUrls: ['./my-standalone-component.component.css'],
  standalone: true
})
export class MyStandaloneComponent {
  message: string = 'Hola, soy un componente standalone!';
}

Uso de un Componente Standalone

Para usar un componente standalone, simplemente impórtalo directamente en el módulo de la aplicación o en otros componentes standalone.

Módulo Principal de la Aplicación (app.module.ts)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyStandaloneComponent } from './my-standalone-component/my-standalone-component.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MyStandaloneComponent  // Importar el componente standalone
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usar el Componente Standalone en el Componente Principal (app.component.html)

<app-my-standalone-component></app-my-standalone-component>

Conclusión

Los componentes standalone en Angular proporcionan una manera más sencilla y modular de crear y gestionar componentes, eliminando la necesidad de declararlos en un NgModule. Esto facilita el desarrollo de componentes reutilizables y mejora la organización del código.



Ejemplo Completo

A continuación se muestra un ejemplo completo de una aplicación Angular que utiliza un componente standalone.

Paso 1: Crear un Nuevo Proyecto Angular

ng new my-standalone-app
cd my-standalone-app

Paso 2: Generar el Componente Standalone

ng generate component my-standalone-component --standalone

Paso 3: Código del Componente Standalone (my-standalone-component.component.ts)

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

@Component({
  selector: 'app-my-standalone-component',
  templateUrl: './my-standalone-component.component.html',
  styleUrls: ['./my-standalone-component.component.css'],
  standalone: true
})
export class MyStandaloneComponent {
  message: string = 'Hola, soy un componente standalone!';
}

Paso 4: Código de la Plantilla del Componente (my-standalone-component.component.html)

<p>{{ message }}</p>

Paso 5: Código de los Estilos del Componente (my-standalone-component.component.css)

p {
  color: blue;
  font-weight: bold;
}

Paso 6: Actualizar el Módulo Principal de la Aplicación (app.module.ts)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyStandaloneComponent } from './my-standalone-component/my-standalone-component.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MyStandaloneComponent  // Importar el componente standalone
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Paso 7: Usar el Componente Standalone en el Componente Principal (app.component.html)

<app-my-standalone-component></app-my-standalone-component>

Conclusión

Siguiendo estos pasos, puedes crear y utilizar componentes standalone en tus aplicaciones Angular de manera efectiva.



Ejercicio

Crea un nuevo componente en tu proyecto Angular, edita la lógica y la plantilla, y úsalo en la aplicación principal. Verifica que el mensaje se muestre correctamente en el navegador.