Componentes

Un componente es el bloque fundamental de construcción en Angular. Consiste en:

• Template (Plantilla): HTML que define la vista del componente.
• Class (Clase): Lógica del componente (TypeScript).
• Styles (Estilos): CSS para el estilo del componente.

Para generar un nuevo componente, usa el comando:

Bash

          
            ng generate component mi-componente
          
      

Esto creará una carpeta mi-componente dentro de src/app con los archivos mi-componente.component.ts, mi-componente.component.html, mi-componente.component.css y mi-componente.component.spec.ts (para pruebas unitarias).

Ejemplo:

TypeScript

          
            // src/app/mi-componente/mi-componente.component.ts
            import { Component } from '@angular/core';

            @Component({
            selector: 'app-mi-componente', // Selector para usar el componente en el HTML
            template: `<p>¡Este es mi primer componente!</p>`,
            styles: []
            })
            export class MiComponenteComponent { }
          
      

Para usar este componente en tu app.component.html, simplemente usa el selector:

HTML

          
            <app-mi-componente></app-mi-componente>