Cómo crear un componente en Angular
En Angular, los componentes son la base de la interfaz de usuario. Cada componente se compone de una plantilla (HTML), una lógica (TypeScript) y estilos (CSS o SCSS).
Crear un componente en Angular
Para generar un nuevo componente, usa el siguiente comando en la terminal:
ng generate component nombre-del-componenteTambién puedes usar la versión corta:
ng g c nombre-del-componenteEsto creará una carpeta con cuatro archivos:
-
nombre-del-componente.component.ts→ Lógica del componente -
nombre-del-componente.component.html→ Plantilla (vista) -
nombre-del-componente.component.css→ Estilos -
nombre-del-componente.component.spec.ts→ Pruebas
Estructura de un componente
El archivo nombre-del-componente.component.ts tendrá una estructura similar a esta:
import { Component } from '@angular/core';
@Component({
selector: 'app-nombre-del-componente',
templateUrl: './nombre-del-componente.component.html',
styleUrls: ['./nombre-del-componente.component.css']
})
export class NombreDelComponenteComponent {
mensaje: string = '¡Hola desde Angular!';
}Usar el componente en otro lugar
Para mostrar el componente en otro archivo, usa su selector en la plantilla de otro componente, por ejemplo, en app.component.html:
<app-nombre-del-componente></app-nombre-del-componente>Ejemplos de uso
- Componentes reutilizables: Botones, tarjetas, formularios, etc.
- División de vistas: Separar la aplicación en módulos organizados.
-
Comunicación entre componentes: Uso de
@Input()y@Output().
Jorge García
Fullstack developer