componentes en angular

Entendiendo los componentes en Angular – Guía de iniciación

Última actualización:

TEN EN CUENTA QUE...

En este artículo vamos a estudiar a fondo un pilar básico de Angular: los componentes. Si acabas de aterrizar aquí y no tienes ni idea de Angular, te recomiendo que eches un vistazo a esta introducción a Angular antes.

Introducción

Para desarrollar el contenido de este artículo necesitamos un proyecto de Angular en su estado inicial, con todas sus configuraciones intactas. Si no sabes cómo iniciar un proyecto con Angular, en el post de arriba tienes las instrucciones necesarias, pero aquí va un resumen

1. Instala NodeJS. Para comprobar si ya lo tienes, utiliza el comando node -v

2. Instala la CLI de Angular con el comando npm install -g @angular/cli 

3. Navega con tu terminal hasta un directorio de tu pc donde quieras crear tu proyecto con Angular y usa el comando ng new [nombre-de-tu-app]

4. Navega hasta tu carpeta recién creada con el comando cd [nombre-de-tu-app]

5. Inicia un servidor local con el comando ng serve -o. Eso abrirá tu proyecto en el puerto local 4200, normalmente.

Con esto hecho, ya tenemos nuestro proyecto visible en el navegador, que, en la versión 8 de Angular (la que estoy usando para este artículo), debería tener este aspecto:

angular start page

Editando nuestra app

Para empezar a editar Angular, vamos al archivo app.component.html y borramos todo su contenido. A continuación escribimos un título, por ejemplo:

<h4>I'm a title in the AppComponent</h4>

Si guardas, ya deberías verlo en tu navegador. ¿Pero cómo sabe Angular que debe mostrar el contenido de ese archivo en el navegador? 🤔 En realidad no es el contenido del app.component.html el que se muestra en la página, sino el del index.html. El index.html es esa SPA de la que hablamos en el artículo de introducción a Angular. Echémosle un vistacillo.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyFirstApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Verás que en el <title> está el título que ves en la pestaña de tu navegador, en mi caso MyFirstApp. Pero lo que más nos interesa es esa etiqueta extraña <app-root>. Prueba a añadir cualquier texto entre el <app-root>, por ejemplo:

<app-root>Trying Angular</app-root>

Verás que en tu web se sigue mostrando "I'm a title in the AppComponent". Aunque durante algunos mili-segundos (mientras se carga la app), quizás puedas ver "Trying Angular". 😮

<app-root> no es un elemento HTML típico, sino uno customizado, creado automáticamente por Angular la primera vez que generamos el esqueleto de una app con Angular, como parte del componente app (la carpeta app). Es el componente más importante, ya que conecta todas las piezas de nuestra app.

Si nos fijamos en el archivo app.component.ts, ahí veremos la propiedad selectorcuyo valor es app-root, y no por casualidad. Así es como Angular sabía qué contenido mostrar en el index.html, porque el app-root es una etiqueta HTML que representa a todo un componente (el AppComponent). Al añadirla al index.html, Angular ya sabe de qué hilo tirar. 😌

Pero nos falta una pieza clave, y es entender cómo arranca una aplicación hecha con Angular. Para entender esto, fijémonos en el código fuente de nuestra app en el navegador.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyFirstApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>trying Angular</app-root>
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body>
</html>

Efectivamente, es muy parecido al código del index.html, salvo por los scripts del final, que son inyectados por la CLI automáticamente cuando Angular despliega una app en el navegador. Esto sucede concretamente cada vez que guardamos nuestra app, porque ésta se re-compila (siempre y cuando tengas abierta tu terminal con el comando ng serve ejecutándose).

En ese proceso de compilación, Angular transforma y "empaqueta" todo el código TypeScript de la app (el que hayamos escrito nosotros más otros archivos contenidos en Angular), produciendo unos paquetes finales (en inglés, bundles) de código JavaScript (en adelante, JS). Esos bundles son inyectados en la versión final de nuestra app, que es la que está visible en nuestro navegador.

Uno de esos archivos que Angular transforma es el main.tsEchémosle un vistacillo. La línea más importante es esta:

platformBrowserDynamic().bootstrapModule(AppModule)

porque ahí es donde se especifica el punto de arranque de nuestro proyecto. Esto es como seguir miguitas de pan, así que vamos a continuar 🍞. Empezar a editar una app es uno de los muchos temas clave que aprendí en este fantástico curso de Angular

Desde vsCode, si haces click sobre el AppModule, te llevará al archivo app.module.ts. Y ahí es donde se cierra el círculo. Porque ahí tenemos un array:

bootstrap: [AppComponent]

que nos indica con qué componente se debe iniciar nuestra app (por defecto, el AppComponent).

esquema angular arranque

Cómo crear un componente

Un componente en Angular es un bloque de código re-utilizable, que consta básicamente de 3 archivos: un CSS, un HTML (también conocido como plantilla o en inglés, templatey un TypeScript (en adelante, TS). La carpeta app con la que viene Angular por defecto es un componente, aunque un tanto especial. Pero fíjate que tiene esos 3 mismos archivos.

Vamos a trabajar con un ejemplo para entendernos mejor. Imaginemos que queremos mostrar cierta información sobre un hipotético elemento de nuestra app, por ejemplo, un contador (es decir, como un cronómetro).

1. Como normal general (que tiene sus excepciones) todos los componentes de un proyecto de Angular deben ser subcarpetas de la carpeta principal (de la carpeta app). Así que el primer paso sería crear una carpeta llamada counter dentro de la carpeta app.

Dado que nuestro componente será un contador (en inglés, un counter), es una buena práctica llamar a la carpeta que lo contiene con el mismo nombre. Vamos a crear este componente de manera manual para poder entender lo que estamos haciendo, aunque con el Angular CLI lo podríamos hacer con un simple comando. 

Lo llamamos counter.component.ts. El .component no es obligatorio, sino una convención para que puedas identificar qué es qué entre los cientos de archivos de una aplicación de Angular. Recordemos que le hemos añadido la extensión .ts porque ahí es donde vamos a configurar la lógica de programación de este componente.

Un componente es sencillamente una clase de TS de la que Angular puede crear instancias (en inglés, instances). Si esto de clases te suena a chino, puedes leer esta serie sobre Programación orientada a objetos donde te quedará todo claro como el agua.

Debemos exportar nuestra clase para poder usarla en el exterior (es decir, fuera del archivo counter.component.ts). En cuanto al nombre de la clase, existe una convención por la cual se debe usar UpperCamelCase seguido de la palabra Component. 🐪 En nuestro caso: CounterComponent.

2. Le añadimos un decorador (en inglés, decorator) para que Angular sepa que esto es una clase especial: un componente. Los decorators dotan de capacidades extra a un elemento, normalmente a un componente, aunque no están restringidos a éstos. En este caso (el más común) queremos usar el @Component decorator.

Tendremos que importarlo también, dado que TS no sabe lo que es un @Component decorator a menos que se lo indiquemos.  Lo importamos desde el paquete de Angular @angular/core. Este es un paquete que nos da acceso a muchas de las funcionalidades clave de Angular, de ahí su nombre. 😁  

La creación de componentes es uno de los temas clave que aprendí en este curso de Angular.

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

@Component()
export class CounterComponent {

}

Al decorador tenemos que pasarle un objeto de JS para configurarlo y hacerlo válido. La información que vamos a incluir aquí se almacenará como meta data asociada a esta clase, que le servirá a Angular para saber qué hacer con dicha clase. De momento, esta información será:

  • un selector con el nombre que tendrá nuestra etiqueta de HTML personalizada. Debe ser un string, y lo habitual es que usemos el prefijo -app más el nombre de nuestro componente.
  • una referencia a una templatecon la que podemos tomar una de estas opciones:
    • apuntar a un archivo HTML externo 👉 templateUrl (debemos usar un relative path)
    • escribir un inline HTML

Nosotros vamos a usar la primera opción de momento.

@Component({
selector: 'app-counter',
templateUrl: './counter.component.html'
})

3. Nos creamos dicho archivo HTML externo dentro de la carpeta counter, lo llamamos counter.component.html y añadimos algo de contenido, por ejemplo:

<p>I'm the counter component!</p>

¡Y con esto ya hemos creado nuestro primer componente! ¡Yuju! 👏 🎉 Lo siguiente es aprender a utilizarlo.

Entendiendo el papel del AppModule

En la sección anterior hemos creado nuestro primer componente, pero Angular aún no sabe que existe. Para informarlo, tenemos que hacer algunas modificaciones en el archivo app.module.ts. 

Pero antes debemos saber qué es un módulo en el contexto de Angular.  Angular nos ofrece múltiples funcionalidades y las organiza en módulos, algo así como paquetes de funcionalidades relacionadas entre sí. 

Por ejemplo, el módulo FormsModule, contenido en el paquete @angular/forms, es un conjunto de funcionalidades relacionadas con los formularios. 

El AppModule es un módulo un tanto especial, porque es donde recopilamos (entre otras cosas) la lista de componentes que van a construir nuestra app. Es muy posible que no necesitemos más que el AppModule para desarrollar apps pequeñas o medianas. Sin embargo, si el proyecto crece, podríamos necesitar dividir nuestra lista de componentes en dos módulos, por ejemplo.

Por defecto, el AppModule es una una clase de TS vacía, que, al igual que un componente, se transforma en algo (en este caso, en un módulo) al añadirle dos cosas: 

  • el decorador ngModule
  • la importación de dicho módulo desde el paquete @angular/core. 

En cuanto a las 4 propiedades de las que consta el decorador, baste decir que las declarations es el array donde irán nuestros componentes e imports el array donde importaremos otros módulos si fuera necesario. Como ves, por defecto ya viene con algún módulo incluido, porque es lo básico que Angular necesita para funcionar.

El array bootstrap ya la hemos visto más arriba, y ya sabemos que es el array que informa a Angular desde qué componente iniciar nuestra app (que nada tiene que ver con el framework de CSS 🙄 ). La propiedad providers no es relevante para el caso que nos ocupa. 

Dicho esto, es el momento de continuar con la configuración de nuestro componente para que sea visible para Angular, porque por defecto Angular no rastrea todos tus archivos para ver si has creado algún componente nuevo. Tendrás que decírselo tú.

1. Registramos nuestro componente en el AppModule (app.component.ts) y lo importamos. Al importarlo, apuntamos a nuestro archivo counter.component, sin extensiones, porque Webpack no las necesita para saber que es un archivo TS. Si no sabes qué es Webpack, te resultará muy útil conocerlo. Aquí puedes encontrar una guía completa.

🧐 TIP: En vsCode, si declaras tu componente en declarations, automáticamente se creará la línea del import

Nuestro archivo app.module.ts nos queda de la siguiente manera:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CounterComponent } from './counter/counter.component';

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

Cómo usar nuestro componente

Como hemos adelantado antes, app.component.html es el archivo HTML que va a contener todos nuestros selectores HTML de los distintos componentes. Así que ese es el lugar correcto para insertar el selector de nuestro componente, <app-counter>.

1. Añadimos un separador debajo del <h4> y el <app-counter> a continuación.

<h4>I'm a title in the AppComponent</h4>
<hr>
<app-counter></app-counter>

¡Y ya lo tenemos! Si guardas, en tu navegador deberías ver el contenido del app.component.html, que en mi caso es:

I'm a title in the AppComponent
----------------------------------------
I'm the counter component!

Creación automática de componentes

Hasta ahora hemos creado componentes de manera manual, y es bueno que te acostumbres a hacerlo así al principio para entender qué está pasando con tu código. Si ya entiendes lo que pasa y puedes crear un componente manualmente sin que te de errores, entonces prueba Angular CLI para generar componentes automáticamente y verás qué maravilla. 

Siguiendo con nuestro ejemplo, vamos a crearnos un componente llamado counterssi, como el CounterComponent, pero en plural. Supongamos que queremos englobar nuestro componente counter en un componente global que contenga muchos contadores. Por eso lo llamamos counters. La creación de componentes es uno de los temas claves que aprendí en este completo curso de Angular.

Abre tu terminal (yo suelo usar la terminal integrada en vsCode para el proceso de compilación y abrir una terminar externa para hacer el resto de cosas), y apunta a la carpeta de tu proyecto de Angular, en mi caso: 

C:\Users\User\workspace\my-first-app\src\app\

y utiliza el siguiente comando de la CLI:

ng generate component counters

Existe una versión acortada de esto, y además, queremos evitar que se cree un archivo para hacer pruebas (en inglés, tests), por tanto, podríamos usar, en lugar del comando de arriba, este:

ng g c counters --skipTests

Este comando hará lo siguiente:

  • crear una carpeta llamada counters dentro de la carpeta app
  • crear 3 archivos dentro de la carpeta counters: un .html, un .ts y un .css
  • actualizar el app.module.ts para avisar a Angular de que un nuevo componente ha sido creado. 

NOTA: NOMBRE DE UN COMPONENTE

Al utilizar Angular CLI para crear un componente, llámalo como quieras. Eso sí, asegúrate de que, cuando tenga varias palabras, las separes con guiones, por ejemplo, client-table. Angular automáticamente creará una carpeta llamada client-table y lo pondrá en UpperCamelCase donde corresponda, o sea, ClientTableComponent.

Anidando componentes

Vamos a suponer que queremos que nuestro componente CounterComponent se muestre dentro del CountersComponent. Es decir, queremos anidar un componente dentro de otro, lo que se conoce como nested components. 

1. Para hacer que nuestro componente CounterComponent esté anidado dentro del CountersComponent, no tenemos más que irnos al archivo counters.component.html, borrar el código que traiga por defecto (normalmente <p>counters works!</p>) e incluir ahí nuestro selector del CounterComponent ( <app-counter> ). 

Vamos a incluirlo un par de veces con el propósito de ver que los componentes son elementos re-utilizables

Nuestro código nos quedaría así: 

<app-counter></app-counter>
<app-counter></app-counter>

2. Dado que lo que queremos mostrar en el navegador es el contenido del CountersComponent (que contiene un par de componentes CounterComponent), sustituimos el selector <app-counter> en el archivo app.component.html por el selector <app-counters>, quedando nuestro código de la siguiente manera:

<app-counters></app-counters>

Si guardas estos cambios, en tu navegador deberías ver casi lo mismo que antes, con una línea más de "I'm the counter component!". Si ahora abres la consola de chrome en el navegador, en la pestaña Elements, podrás ver esa estructura anidada de componentes que acabamos de crear. Si quieres profundizar en tema de los componentes anidados, este curso de Angular te puede interesar.

Añadiendo CSS a un componente con el apoyo de Bootstrap

Para mejorar la apariencia de nuestra app, que en estos momentos es bastante fea dado que nuestro contenido se muestra pegado a los bordes, tenemos que trabajar con CSS.

En Angular, cada componente tiene un archivo CSS vinculado al componente, que encapsula los estilos que escribamos aplicándolos solamente a es componente. 

Si abres el archivo app.component.ts, verás que el array styleUrls apunta hacia un archivo: ese es el CSS del componente. Es un array porque permite hacer referencia a múltiples archivos CSS.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class  AppComponent {
}

Es importante mencionar que es posible escribir CSS directamente en el archivo TS. Es lo que se conoce como inline CSS. Pero personalmente no soy muy fan de mezclar código TS con código CSS o HTML, así que no vamos a utilizar este enfoque.

1. Vamos a usar Bootstrap para diseñar nuestra app, dado que este potente framework nos permite diseñar a la velocidad del rayo ⚡. Aquí tienes una sección en esta introducción a Angular donde explico cómo integrar Bootstrap con Angular.

2. Añadimos algo más de contenido en el archivo app.component.html para poder ver mejor el efecto cuando le apliquemos algún estilo, y le añadimos unas clases de Bootstrap. 

Nuestro archivo quedaría así: 

<div class="container">
  <div class="row">
    <div class="col">
      <h4>I'm a title in the AppComponent</h4>
      <hr>
      <app-counters></app-counters>
    </div>
  </div>
</div>

Y con esto, en el navegador deberíamos ver una página un poco más decente, con algunos márgenes y una tipografía menos fea. 

3. Esto está genial, pero vayamos un paso más allá y añadamos nuestras propias clases CSS en el archivo correspondiente (app.component.css). Podemos cambiar simplemente el color de nuestro h4, quedando nuestro archivo de la siguiente manera:

h4 {
  color: blueviolet;
}

¡Y listo! Ahora el h4 ha cambiado de color.

componentes anidados angular

Diferentes formas de usar el selector

Hasta ahora hemos usado los selectores como un elemento de HTML personalizado, tipo:

<app-counters></app-counters>

Esta no es la única forma que pueden tomar los selectores (aunque sí la más común), ya que pueden ser: 

  •  atributos HTML ]
  • .clases de CSS

Hagamos un ejemplo con el CountersComponent.

1. Para utilizar un selector como atributo, debemos sustituir el selector actual en el archivo counters.component.ts por:

selector: '[app-counters]',

y, en el lugar donde estemos usando ese elemento (en el archivo app.component.html), sustituir la etiqueta <app-counters></app-counters> por cualquier otro elemento de HTML e incluirle nuestro atributo ahí, por ejemplo:

<div app-counters></div>

2. La otra alternativa es usar un selector como una clase de CSS. 

El proceso es muy similar:

  • declaramos el selector como una clase CSS:
selector: '.app-counters',
  • lo añadimos a nuestra template, a cualquier elemento HTML, como una clase normal:  
<div class="app-counters"></div>

THE END!

¡Y con esto finaliza esta guía básica sobre componentes en Angular! 😊 

Si te queda alguna duda, ¡nos vemos en los comentarios!

Si te gusta el blog, puedes darme tu apoyo por lo que vale un café ツ

¡Gracias!¡Gracias!

Sobre la autora de este post

Soy Rocío, una abogada reconvertida en programadora. Soy una apasionada de aprender cosas nuevas y ferviente defensora de que la única manera de ser feliz es alcanzando un equilibrio entre lo que te encanta hacer y lo que te saque de pobre. Mi historia completa, aquí. 

Más recursos de aprendizaje

En mi experiencia, la manera más eficaz para aprender Angular es combinando varias vías de aprendizaje. Uno de mis métodos favoritos son los vídeo-cursos y mi plataforma predilecta para eso es Udemy. He hecho varios cursos pero sólo recomiendo aquellos que verdaderamente me han sido útiles. Aquí van:


Si necesitas apoyo en forma de libro, puede que éstos te sirvan de ayuda:

La programación es un mundo que evoluciona a una velocidad de vértigo. Los autores de estos libros lo saben, por eso suelen encargarse de actualizar su contenido regularmente. Asegúrate de que así sea antes de adquirirlos 😌.

Participo en el programa de afiliados de Udemy y Amazon, lo que significa que, si compras alguno de estos cursos y/o libros, yo me llevaré una pequeña comisión y a ti no costará nada extra. Vamos, lo que se dice un win-win 😊.

Otros artículos que pueden interesarte

Días del 353 al 386
Objetivos versus realidad Y nuevamente, llegó otro día clave. Llegó…y pasó. El pasado 4 de marzo este Reto Computer Geek[...]
Construye Minioland: Tu primera aplicación con Angular | Parte #1
¿Qué vamos a construir?Minioland, o así he decidido llamar a esta sencilla app, totalmente responsive y de tipo Single Page[...]
Angular: Entendiendo la Directiva ngModel
Angular es un framework que nos permite, entre otras cosas, añadir contenido dinámico a nuestros archivos HTML. Una de las formas[...]
Si crees que este post puede serle útil a alguien, por favor, ¡compártelo!:

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Como toda web legal que se precie, utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestro sitio web. Si continúas utilizando este sitio asumiremos que estás de acuerdo. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar