Introducción a los Componentes

Uno de los conceptos centrales en el desarrollo usando Angular son los componentes, que son bloques reutilizables que combinan HTML, CSS y TypeScript para crear la interfaz de forma más controlada y sencilla.

¿Qué es un Componente?

Un componente en Angular es una unidad independiente que controla una parte de la interfaz de usuario.

Cada componente tiene su propia lógica, estilo y plantilla, lo que permite separar responsabilidades y mantener el código más organizado.

Por ejemplo:

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

@Component({
  selector: 'app-avatar',
  template: `<img src'ruta/imagen' alt='img' />`,
  styleUrl: './avatar.css'
})
export class Avatar { }

El objeto que se pasa a @Component se conoce como los metadatos del componente. Allí se configuran sus propiedades principales, como:

• selector: nombre con el que se utiliza el componente en otros templates.
• template: define el contenido que se renderiza.
• templateUrl: ruta (relativa) del archivo del template.
• styles: estilos CSS locales del componente.
• stylesUrl: ruta (relativa) de la hoja de estilos.
• imports: módulos, directivas o componentes que este componente necesita.

Existen más propiedades, pero no es necesario conocerlas todas al inicio, se usan según la necesidad del componente.

Generar componentes con Angular CLI

La CLI de Angular es una herramienta imprescindible. Permite generar componentes con un solo comando:

ng generate component nombre-del-componente
# o la forma corta:
ng g c nombre-del-componente

Al ejecutarlo, Angular generará automáticamente:

• Un archivo .ts con la clase del componente.
• Un archivo .html para la plantilla.
• Un archivo .css (o .scss) para los estilos.
• Un archivo .spec.ts para pruebas unitarias.

Por ejemplo, la siguiente imagen muestra el resultado:

Importar componentes

Para usar un componente dentro de otro, agrégalo al arreglo imports del decorador @Component:

import { Avatar } from './avatar';

@Component({
  // Importa el componente `Avatar` parala plantilla
  // poder usarlo en la plantilla de este componente.
  imports: [Avatar],
  /* ... */
})
export class App { }

Mostrar componente en un template

Ahora que ya está importado, se puede usar en el template llamando a su selector. Por ejemplo, tenemos algo como esto:

FOLDERS

Sin archivo x

          
        
            img {
    filter: drop-shadow(2px 4px 10px red);
}

        
      

          
        
            <img src="//robohash.org/1" alt="robot">

        
      

          
        
            import { ComponentFixture, TestBed } from '@angular/core/testing';

import { Avatar } from './avatar';

describe('Avatar', () => {
  let component: Avatar;
  let fixture: ComponentFixture<Avatar>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [Avatar]
    })
    .compileComponents();

    fixture = TestBed.createComponent(Avatar);
    component = fixture.componentInstance;
    await fixture.whenStable();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

        
      

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

@Component({
  selector: 'app-avatar',
  imports: [],
  templateUrl: './avatar.html',
  styleUrl: './avatar.css',
})
export class Avatar { }

        
      

          
        
            <main>
    <h2>Introducción a los componentes</h2>
    <app-avatar></app-avatar>
    <img src="//robohash.org/1" alt="robot">
</main>

        
      

          
        
            import { Component } from '@angular/core';
import { Avatar } from './avatar/avatar';

@Component({
  selector: 'app-root',
  imports: [Avatar],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App { }

        
      

Selecciona un archivo para ver su contenido

Bueno, pasa lo siguiente:

1. Se configuró el componente Avatar.
2. Se importa el componente en App.
3. Se utiliza el selector del componente dentro del template <app-avatar>.

En el navegador, el resultado es el siguiente:

Experimenta creando pequeños componentes y combinándolos. Es la forma más rápida de aprender Angular en su última versión cargando…