En Angular, los componentes son bloques reutilizables que combinan lógica y vista, permitiendo construir aplicaciones modulares y mantenibles.
¿Te está gustando esta lección?
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
Creación de componentes
Para crear un componente en Angular, utilizamos el comando:
ng generate component mi-componente
Cuando se ejecuta el comando anterior, la CLI de Angular generará automáticamente los siguientes archivos y directorios:
- una nueva carpeta con el nombre del componente en el directorio
src/app
, - la clase TypeScript que controla la lógica,
- la plantilla HTML que define la estructura visual,
- el archivo CSS que contiene los estilos específicos del componente y
- el archivo de prueba para realizar pruebas unitarias.
Juntos, estos elementos permiten construir aplicaciones modulares y personalizables.
Estructura de un componente
Un componente en Angular se define utilizando la clase @Component
. Esta clase es un decorador que acepta un objeto de metadatos como argumento.
El objeto de metadatos define las propiedades clave del componente, como el selector, la plantilla, los estilos y las animaciones.
A continuación se muestra un ejemplo básico de un componente en Angular:
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Mi Aplicación Angular';
}
Propiedades del decorador @Component
- Selector: Define cómo se utilizará el componente en una plantilla HTML. Puede ser un nombre de elemento, un nombre de atributo, o una clase CSS.
- Template/TemplateUrl: Define la estructura HTML del componente. Puede ser una cadena de HTML directamente en el objeto de metadatos usando
template
, o referenciar un archivo HTML externo usandotemplateUrl
. - Styles/StyleUrls: Define los estilos CSS para el componente. Puede ser una cadena CSS directamente en el objeto de metadatos usando
styles
, o referenciar un archivo CSS externo usandostyleUrls
. - Standalone: Indica que el componente es independiente, lo que significa que no necesita ser declarado en ningún módulo. Esta es una característica introducida en Angular 14 para simplificar la gestión de módulos.
- Imports: Permite importar otros componentes, directivas o servicios directamente en el componente. En este ejemplo,
imports: [RouterOutlet]
se utiliza para incluir elRouterOutlet
, lo cual es útil para aplicaciones que utilizan enrutamiento.
Ejemplo de un componente
Clase TypeScript
Supongamos que se desea crear un componente llamado user-profile
que muestra la información básica de un usuario.
El siguiente ejemplo demuestra cómo se podría crear este componente en Angular:
// En TypeScript
import { Component } from '@angular/core';
@Component({
selector: 'app-user-profile', // Selector utilizado en el HTML
templateUrl: './user-profile.component.html', // Ruta de la plantilla HTML
styleUrls: ['./user-profile.component.css'] // Ruta de los estilos CSS
})
export class UserProfileComponent {
userName: string = 'Usuario Ejemplo';
userAge: number = 25;
}
La clase UserProfileComponent
contiene los datos del usuario y puede tener métodos para manejar eventos o realizar operaciones relacionadas con este componente.
Plantilla HTML
<!-- En el archivo user-profile.component.html -->
<div class="user-profile">
<h2>{{ userName }}</h2>
<p>Edad: {{ userAge }}</p>
</div>
Estilos CSS
/* En el archivo user-profile.component.css */
.user-profile {
border: 1px solid #ccc;
padding: 10px;
background-color: #f5f5f5;
text-align: center;
}
Uso del componente
Una vez creado el componente, se puede utilizar en otras partes de la aplicación mediante su selector, como se muestra a continuación:
<!-- En el archivo src/app/app.component.html -->
<app-user-profile></app-user-profile>
Ejecución de la aplicación
Finalmente, para ejecutar la aplicación, se utiliza el siguiente comando de Angular CLI:
ng serve
Luego, en un navegador web, navegar hacia http://localhost:4200
para observar el componente de user-profile
en funcionamiento.
Aprendizajes de esta lección
- Comprender del significado y ventajas de los componentes en Angular.
- Dominar la creación de componentes.
- Configurar componentes con el decorador @Component.
- Conocer el contenido de un componente.
Completa Angular y certifícate
Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs