Ejemplo de breadcrumbs en Angular con xng-breadcrumb

Nuestros componentes de ejemplo

Para el ejemplo vamos a trabajar con cuatro componentes que se relacionarán entre ellos de la siguiente forma:

• Un componente rojo que será el padre de todos.
• Por otra parte, un componente azul que actuará como hijo A, y que es hijo y padre otros dos componentes a la misma vez.
• Finalmente, del componente anterior descenderán otros dos: el componente amarillo y el componente verde, que serán de tipo hijo B, ya que únicamente son hijos.

Para verlo de forma más visual, adjunto esquema:

Instalación y configuración de xng-breadcrumb

Lo primero que tenemos que hacer es instalar en nuestro proyecto la librería de xng-breadcrumb desde npm o yarn, lo hacemos de la siguiente forma:

npm install --save xng-breadcrumb
//------------- OR --------------
yarn add xng-breadcrumb

Después de este paso es muy importante que importemos la librería en nuestro archivo app.module.ts y lo declaremos en la parte de imports de la siguiente forma:

Finalmente, para cerrar esta configuración inicial de la librería, agregamos en nuestro archivo app.component.html los tags referentes a xng-breadcrumb de la siguiente forma:

También es posible crear un nuevo componente para los breadcrumbs y incluir allí el tag y trabajar con él de la forma que lo haríamos con cualquier otro componente, lo hemos incluido justamente aquí para simplificar y que se entendiera mejor.

Routing en app-routing.module.ts - añadimos jerarquía

Para el siguiente paso vamos a configurar nuestro Routing a través del archivo app-routing.module.ts, para la jerarquía que hemos establecido al principio del ejemplo lo haremos de la siguiente forma:

Es importante que prestemos atención a estos puntos:

• children: es la forma que tenemos de decirle al routing de Angular que estamos estableciendo una jerarquía de componentes padre y componentes hijos, esto es lo que nos permitirá que las rutas de los breadcrumbs salgan de esta forma Padre > Hijo A > Hijo B.

• data: {breadcrumb: {alias: ''} nos permite indicar un alias para referenciar a ese componente, lo utilizaremos más adelante así que también es aconsejable establecerlo. EDIT: Si simplemente ponemos {breadcrumb: 'Nombre del componente'} no tendremos que modificar el alias más adelante.

Configuración de los componentes padre

A continuación, nos vamos a configurar los componentes con rol de padre, que son:

• Caja roja - Padre
• Caja azul - Hijo A (que es hijo y padre a la vez)

Para esto es muy importante añadir el tag router-outlet en los archivos .html de cada componente, nosotros lo indicamos al final:

Todo el contenido del padre lo contendremos en un div (o cualquier otro elemento) al que le pasaremos una directiva ngIf que recogerá el resultado de la siguiente función:

A través de esta función, que devolverá true o false según la comparación que le establecemos, podemos saber si la ruta actual de nuestra web es la del componente en concreto, en ese caso (que sería cuando devuelve true) SÍ cargaremos el contenido que tenemos dentro del div a través del ngIf, de lo contrario, en caso de que estemos en uno de los hijos y que, por tanto, a través del router-outlet estemos mostrando más de un componente, lo que conseguimos con esta directiva ngIf es que no nos pinte el componente padre y evitemos esos duplicados.

Para este punto es importante importar Router desde @angular/router y declararlo en el constructor para poder utilizarlo y que nos diga en qué componente estamos según la url. En el ejemplo véis que la información del componente padre raíz se mostrará solo si estamos en la url '/', que sería la raíz de nuestra web.

Cambiar las rutas de los breadcrumbs por nombres de componente

EDIT: Si simplemente ponemos {breadcrumb: 'Nombre del componente'} no tendremos que modificar el alias en este paso.

Finalmente ya solo nos queda cambiar los nombres de las rutas en los breadcrumbs ya que por defecto nos pone la url, esto es fácil y lo haremos desde el archivo .ts de cada componente (de igual forma que el paso anterior solo aplicaba a los componentes padres, este aplica a todos).

Primero de todo tenemos que importar el BreadcrumbService desde xng-breadcrumb y declararlo en el constructor para poder utilizarlo.

Después de este paso ya podemos cambiar el nombre de nuestro componente en los breadcrumbs referenciando su alias (siendo el alias el nombre que le habíamos dado anteriormente en el archivo app-routing.module.ts). Referenciamos el alias después de la @ y, después de la coma (,) le indicamos el nombre que queremos que tenga el componente en la ruta.