En el artículo de Analizando la estructura del directorio SRC de un proyecto de Angular ya vimos lo que es un componente y como es estructura. En el artículo de hoy, hablaremos de dos formas de realizar nuestros componentes. Y son:

De manera manual: el proceso es más lento pero lo realizaremos con el fin de entender al 100 % la estructura y el funcionamiento interno de un componente.

Mediante a un comando proporcionado por @angular/cli: es lo recomendable ya que nos ahorra tiempo y trabajo y además, nos otorga una mayor fiabilidad.

Además de esto veremos como añadir componentes sobre otros componentes. Y finalmente, realizaremos una página web con varios componentes de angular.

Creando y arrancando un proyecto:

Si creamos un proyecto con @angular/cli o utilizamos el que tenemos ya creado si habéis seguido los artículos anteriores:

Y lo abrimos y arrancamos con VSC:

Podemos ver la estructura que viene predefinida al creado un proyecto de Angular con @angular/cli:

Vamos a eliminar el contenido de nuestro src/app/app.components.html:

Y si ahora miramos nuestro HTML, podremos ver que está vacío.

Creando un componente

Para crear un componente primero vamos a reproducir la estructura del componente app. Primeramente, crearemos una folder con el nombre del componente (nav en mi caso) y dentro, meteremos nav.component.ts. La estructura nos tiene que quedar de la siguiente manera:

La estructura de un componente está formada un set (un conjunto de archivos) de archivos. Si nos fijamos, en nuestro nuevo componente por el momento, solo vamos a tener un fichero. El archivo de TypeScript, es la unidad mínima que necesitamos para que nuestro componente funcione. Más abajo, argumentaremos mejor el porque solo necesitamos 1 archivo y veréis el poruqe este es el imprescindible.

Repasando las partes de un componente

Para crear un componente necesitamos conocer bien sus funcionamiento y su estructura. Por ello, vamos a repasar la estructura de un componente:

  • Imports: es donde nos vamos a encontrar todo lo que necesitamos para que funcionen nuestros componentes. De hecho, si nos situamos encima del componente, podemos ver que no es nada más y nada menos que un módulo del cual le estamos diciendo que nos importe específicamente la interfaz Component.

  • Component decorator: es la función que acabamos de importar con el import con la que le definiremos la estructura del componente. Aunque no son los únicos valores que puede tener un decorador, (ya profundizaremos en detalle en algunos valores más de los decoradores)  los valores mínimos de un decorator son:
    • selector: definirá el nombre del componente para posteriormente poder ser llamado desde otros componentes, o desde el index.html
    • template: será la vista de un componente ¿Si no la definimos que sentido tendría crear un componente? La respuesta, claramente, será ninguna.

  • export class nombredelcomponente: nos permitirá que este componente sea utilizado fuera de esta clase.

Creando nuestro primer componente (selector + template monolínea)

Bien, pues comenzamos para ello, vamos a nav.components.ts donde escribiremos la lógica de nuestro componente y creamos una clase con el nombre del componente (recordad que las clases siempre llevan la primera letra en mayúscula):

Una vez creada la clase, vamos a añadirle export ya esto, nos permitirá trabajar con ella desde fuera de nuestra clase:

Ahora, escribimos el selector @Component y además realizamos el import de Component que se encuentra en la dependencia @angular/core

Una vez definido el decorador, vamos a escribir su selector (nombre) y su template. Hasta ahora, estábamos utilizando templateURL que utiliza un fichero HTML externo, y eso es realmente perfecto ya que separa capas/piezas por tecnologías. Como si de piezas de lego se tratará poniendo una tecnología encima de otra. Pero para conocer una nueva propiedad de nuestro decorador, vamos a trabajar con template directamente. La cual, nos permitirá escribir código HTML directamente en nuestro archivo de TypeScript.

Una vez creado el componente tenemos que añadirlo al módulo por defecto main.ts

Si alguna vez eliminamos un componente, tendremos que borrarlo también de main.ts ya que sino nos dará un error diciendo que no encuentra a dicho componente

Añadiendo el componente

Si recordamos nuestro archivo index.html contiene la estructura de HTML5 y la llamada que carga al componente principal de nuestra app-root (el componente que viene por defecto).

Por tanto, si vamos al template (es decir, la vista HTML) de este componente (el que viene por defecto en Angular y le añadimos el nombre de nuestro nuevo selector, y vamos al navegador:

Podemos ver que acabamos de añadir un componente sobre un componente:

Modificando nuestro componente (selector + template monolínea + template monolínea)

Perfecto, hasta ahora, hemos trabajado con el componente pero sin hojas de estilo, ya que no son obligatorias, simplemente son una pieza que complementa a lo anterior. Vamos a añadir un color de fondo a nuestro h1 pero sin añadir un fichero externo.

Modificando nuestro componente (selector + template multilínea + template multilínea)

Vamos a añadir un párrafo a nuestro template (además del H1 que ya tenemos) y a darle un color azul.

Si queremos añadir más contenido al template o al styles, e intentamos escribir varias líneas, cuando hacemos el salto de línea, nos encontramos ante lo siguiente:

La solución es utilizar es substituir las comillas simples (”) por plantillas literales (“) y ya podemos realizar los cambios sin problema:

Añadiendo OnInit podemos utilizar la interfaz

Angular tiene un ciclo de vida (life cicle) que es manejado/gestionado automáticamente por el propio Angular.

Cada componente de Angular tiene un ciclo de vida (también conocido como life cicle event) durante este proceso, un componente pasa por varios estados y para gestionarlos, Angular nos proporciona una serie de métodos que nos permitirán controlar todo lo que pasa en nuestro componente a través del uso de unos callbacks (los conocidos como component life cycle hooks).

Mediante a estos distintos métodos podemos controlar los distintos puntos por los que puede pasar un componente dentro de su ciclo de vida. Algunos de ellos pueden ser cuando se crea el componente, cuando se destruye, etc.

Para usar cada uno de los ciclos de vida, tenemos que usar importar una interfaz. En nuestro caso, usaremos la llamada OnInit que junto a la ya conocida Component, también se encuentra en @angular/core.

Finalmente, una vez importada, tenemos que implementarla en nuestra clase mediante al método ngOnInit. En este caso, al no haber cambios ya que aún no se ha creado, es el primer método que se ejecuta después del constructor y que el constructor es inicialice.

Si no añadimos el implements OnInit, Angular no invocará al método ngOnInit, por mucho que tú lo hayas declarado.

Si finalmente, ahora vamos a la consola, podremos ver que:

Creando nuestro primer componente (selector + template externa + template externa)

Bien, aunque trabajar como acabamos de ver con vistas (templates) y estilos (styles) desde nuestro componente, lo recomendable es separar dicho código en capas según la tecnología.

Por ello, vamos a crear la siguiente estructura:

Si comparamos nuestro componente nav con el componente por efecto app. Podemos observar que no tenemos el app.component.spec.ts que se encarga del aparatado del testing, ya que por el momento no vamos a realizar test.

Para asociar nuestros ficheros de HTML y CSS  de nuestro componente a nuestro decorador utilizamos las propiedades templateUrl y styleUrls. Vamos a ver un ejemplo:

Creando un componente con ng generate component de @angular/cli

Bien, una vez entendido el funcionamiento de un componente. En los siguientes componentes no vamos a deteneidéntica rnos a crearlos manualmente, sino que vamos a utilizar un comando que nos proporciona @angular/cli que como ya hemos visto nos facilita mucho la vida.

Para ello, vamos a utilizar la instrucción:

Si nos fijamos en nuestra estructura del proyecto, podemos ver que ya tenemos el componente creado:

Si nos situamos en el archivo de TypeScript footer.component.ts, podemos ver un componente que la estructura es idéntica al que hemos creado nosotros anteriormente de forma manual:

La única diferencia entre este  componente y el que hemos creado nosotros anteriormente manualmente es que este tiene el archivo de los tests.

Es más si vamos a app.module.ts podemos ver que hasta se nos ha realizado el import y se nos ha auto añadido el componente en el decorador.

Por defecto, tenemos el siguiente código dentro del HTML:

Vamos a introducir lo mismo en el nav.component.html que hemos creado manualmente:

Si añadimos ambos componentes mediante a su selector a nuestro app.component.html que es el componente por defecto, el resultado será:


Reproduciendo la siguiente página web

Bien, ya tenemos dos secciones de nuestra página, vamos a acabarla:

Existe una forma de crear un componente que es mediante a las iniciarles g (de generate) y c de component. Vamos a verlo:

Metemos todos los componentes dentro del componente app a excepción del article que irá dentro de section:

Bien, ahora vamos a substituir el contenido del html de cada componente por un div con el nombre del componente. Un ejemplo podría ser:

Si visitamos nuestra aplicación d angular, podemos ver que tenemos 5 divs. Y un article dentro del div de Section.

Existen diferentes maneras de realizar la tarea, pero vamos a ir a la más sencilla:

Pero vemos que tenemos el article de color rojo también. Por ello, vamos a ir a su hoja de estilos y vamos a modificarla:

Pero si nos fijamos Article sale como si fuera un elemento separado, y tiene que aparecer en el interior del div:

Si lo metemos dentro, podremos ver que el resultado es el que esperábamos:

Aunque existen mejores maneras de escribir el código os dejo una bastante sencilla, ya que no es el objetivo de este artículo:

Si cargamos la página ahora, podemos ver el resultado:

Esto es todo por hoy, espero que os haya gustado el artículo. Saludos