En el pasado artículo realizamos todos los pasos para crear un componente en Angular 2. Realmente vimos que la mayoría del código lo generas desde Angular CLI, lo que acelera mucho el desarrollo y facilita nuestra labor.

Ahora, para terminar nuestra práctica, vamos a aprender a usar el componente que acabamos de crear. Es una tarea sencilla, pero debido a la arquitectura de Angular y el modo de trabajo que nos marca, es algo que tendremos que realizar en varios pasos:

1. Crear el HTML para usar el componente

En el lugar de la aplicación donde lo vayas a usar el componente, tienes que escribir el HTML necesario para que se muestre. El HTML no es más que la etiqueta del componente, que se ha definido en la función decoradora, atributo "selector" (como vimos al explicar los decoradores).

<app-nombre-del-componente></app-nombre-del-componente>

Dado que estamos comenzando con Angular 2 y el anterior era el primer componente creado por nosotros mismos, solo lo podreamos usar dentro del componente principal (aquel generado por Angular CLI al hacer construir el nuevo proyecto).

El HTML de este componente principal lo encontramos en el archivo "app.component.html". En ese archivo, la vista del componente principal, debemos colocar la etiqueta para permitir mostrar el componente recién creado.

El problema es que esa etiqueta no es conocida por el navegador. Cuando creamos el componente generamos todo el código, en diversos archivos, necesario para dar vida al componente, pero habrá que incluirlo para que el navegador conozca esa etiqueta cuando se vaya a usar. Es lo que hacemos en los siguientes pasos.

2. Importar el código del componente

Como decíamos, desde el componente principal no conocemos el código del componente que se pretende usar. En Angular 2 en general, todo archivo con código Javascript que quieras usar, debe ser importado.

En el componente desde donde pretendas usar ese otro componente necesitas importar su código. Como verás en el archivo .ts principal de un componente, siempre comienza con un import de librerías que nos aporta Angular. Ahora, después del import de las librerías de Angular, colocaremos el import de nuestro componente:

import { NombreDelComponenteComponent } from './nombre-del-componente'

Ese import indica que te quieres traer la clase del componente y después del "from" está la ruta desde donde te la traes.

3. Declarar que vas a usar este componente

El import permite conocer el código del componente, pero todavía no es suficiente para poder usarlo. Nos queda un último paso.

En el componente desde donde hemos incluido el import del componente, un poco más abajo encuentras la función decoradora del componente. En esa función debes declarar todos los componentes que pretendes usar.

Eso lo hago desde la función decoradora del componente principal y tengo que declarar todos los componentes y directivas a usar dentro del array "directives".

directives: [NombreDelComponenteComponent]

El decorador completo del componente principal se vería parecido a esto:

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [NombreDelComponenteComponent]
})

Observa que el array "directives" me permite declarar que voy a usar varios componentes. Simplemente separo sus nombres por comas. Lo que indico, como podrás apreciar, es el nombre de la clase del componente que pretendo usar. Esa clase es la que has importado con el correspondiente "import" del paso anterior (punto 2).

Y eso es todo! Al guardar los archivos se debería recargar de nuevo la aplicación en el navegador y deberías ver el HTML escrito para el componente que estás usando y que acabamos de crear.

El proceso puede parecer un tanto laborioso, pero a medida que se vaya repitiendo observaremos que no hay tanto trabajo. La parte más aburrida de escribir de un componente, el esqueleto o scaffolding, ya te lo dan hecho gracias a Angular CLI. Así que nos queda simplemente hacer la parte del componente que corresponde a las necesidades de la aplicación.

Con los conocimientos que hemos ido proporcionando en los anteriores capítulos del Manual de Angular 2, estamos seguros de que podrás colocar más código, tanto en el HTML como en la clase para proporcionar como práctica otros tipos de funcionalidad.