Creación y Gestión de Componentes en Angular

Curso de Angular: Componentes y Servicios

Contenido del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

20
Componentes y Servicios en Aplicaciones Web
01:09 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:32

Creación y Gestión de Componentes en Angular

Curso de Angular: Componentes y Servicios

Clase 2 de 20

Clase 2 / 20

Recursos

Un componente es una pieza de software con una responsabilidad única y una estructura y funcionalidad determinada, además de ser reutilizable.

Es una manera de dividir tu aplicación de una forma escalable para no tener todo en un solo archivo. Por ejemplo, un componente para el header, otro para el footer, uno más para el menú, etc.

Componentes en Angular

Puedes crear tu primer componente en Angular utilizando el comando ng generate component test-name o en su forma corta ng g c test-name.

Esta acción creará los siguientes archivos:

my-test-name.component.html
my-test-name.component.ts
my-test-name.component.css
my-test-name.component.spec.ts

El archivo .html que será el template que tu componente utilizará.
El archivo .ts que contiene el código TypeScript y la lógica.
El archivo .css que contiene los estilos.
Si escogiste trabajar con un preprocesador de CSS, este archivo puede ser .scss, .sass o .less.

Finalmente, el archivo más extraño, .spec.ts que contiene el código de las pruebas unitarias que puedes escribir para automatizar el testing en tu componente.

Angular también importará automáticamente el componente creado en el archivo app.module.ts para que automáticamente puedas utilizarlo en tu aplicación.

...
import { TestNameComponent } from './test-name/test-name.component';

@NgModule({
  declarations: [
    ...
    TestNameComponent
  ],
  imports: [ ... ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Partes de un componente Angular

El archivo con la extensión .ts es el componente principal de cualquier Angular.

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

@Component({
  selector: 'app-test-name',
  templateUrl: './test-name.component.html',
  styleUrls: ['./test-name.component.scss']
})
export class TestNameComponent {
    ...
}

Observa lo más importante, el decorador @Component().

Los decoradores alteran el comportamiento de una clase en Angular, para que el compilador de TypeScript interprete el código de la manera correcta y sepa que una clase es:

un componente,
un módulo,
un servicio,
una directiva, etc.

Este decorador es quién enlaza el componente con el archivo HTML y la hoja de estilos, además le otorga al componente un selector o un nombre para utilizarlo en tus templates.

Contribución creada con los aportes de Kevin Fiorentino.

FERNANDO OROZCO

Hace 10 meses•editado

Tengan en cuenta que este curso salio en 2021, para esa fecha angular estaba en la version 13, actualmente (Dec 5, 2025) se encuentra en la version 21. . Con lo cual este curso esta obsoleto en terminos de la tecnologia que maneja, por lo cual les recomiendo prestar atencion a los fundamentos, ya que estos practicamente no cambian (Aunque cabe aclarar que si cambiaron un poco en Angular 17v cuando angular se volvio Standalone por defecto).

Si usan una version igual o superior a la 17, no les va a general el archivo "app.module.ts", tienen que agregar "--no-standalone" al comando de creacion de la app.

ng new app-name --no-standalone

Liza Gonzalez

Hace 10 meses

En mi caso la funcionalidad desfazada que encontré con esta clase es que no reconoce automaticamente el componente img.ts, me funciona sólo si realizo la importacion por codigo dentro del componente app.ts

Esto es importante de tener en cuenta, ya que puede causar confusión si se espera que Angular maneje automáticamente todos los componentes como solía hacerlo en versiones anteriores.

FERNANDO OROZCO

Hace 10 meses

Muy buen aporte Liza 👍👍.

Como Angular no genera el modulo al que pertenece el componente, sino que el componente es Standalone, es el componente quien tiene que hacer las importaciones necesarias para su correcto funcionamiento.

Comentarios (62)62 comentarios

Santiago Lopera Naranjo

Hace 5 años

Fernando Robles

Miguel Angel Reyes Moreno

Hace 4 años

Luis Fernando Forero Guzmán

Juan David Amaya Cardenas

Oscar

Rony Porraz Vargas

IVAN FONSECA

Aaron Paredes Cabrera

Jimmy Buriticá Londoño

David Castro

Anfernee Valera

Alina Salinas Mendoza

Diego Jurado

Juan Rivas

Hace un año

Andres Gutierrez Gaviria

Hace un año•editado

Francisco Javier Catalan Serrano

Tanelo Mondaca Silva

Sergio Andrés Bolaños Penagos

Jorddi Suarez

Anderson Duarte Santos

Marco Antonio Celis Morales

Hace 8 meses

Carlos Espinoza

Andrés Cueva

Hace 2 años

Jhon Carlos Colorado Angulo

Juan Perez

Oskar Fabian Vargas Caceres

LUIS ISAZA

Nicolas Molina

Profesor

Fabio Alejandro Ramirez Saavedra

Daniel Camacho

Hace 3 años

Componentes

Desarrollo de Tienda Online con Angular Avanzado

Creación y Gestión de Componentes en Angular

Comunicación de Componentes: Envío de Datos con Inputs en Angular

Comunicación de Eventos entre Componentes en Angular

Creación y Reutilización de Componentes en Angular para Tiendas

Ciclo de Vida de Componentes en Angular: Constructor a OnDestroy

Manejo de eventos y limpieza en Angular con ngOnDestroy y setters

Componentes en Angular: Creación y Organización de Productos

Estilos en Angular: Alcance y Maquetación de Componentes

Despliegue Dinámico de Menú Lateral en Angular

Comunicación Padre-Hijo con Inputs y Outputs en Angular

Servicios

Creación y uso de servicios en Angular para lógica de negocio

Inyección de Dependencias en Angular: Conceptos y Funcionamiento

Conexión a APIs usando HTTP Client Module en Angular

Pipes y Directives

Uso de Pipes en Angular: Transformación y Formatos

Creación de Pipes Personalizados en Angular

Creación y Uso de Directivas en Angular para Manipular el DOM

Best practices

Reactividad y Manejo de Estado en Angular con NGRX

Implementación de Linter en Angular para Buenas Prácticas de Código

Despedida

Componentes y Servicios en Aplicaciones Web

Creación y Gestión de Componentes en Angular

Progreso del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

Recursos

Recursos