# Schematics, componentes y ruteo con Angular + Material

[\[Publicado el 18 de Junio, 2019 en rckstr1.github.io\]](https://rckstr1.github.io/2019/06/18/GLTrack1.html)

## **INTRODUCCIÓN**

En este post comenzaremos a crear una aplicación para registrar y monitorear un registro personal de niveles de glucosa en la sangre, esas mediciones que deben tomarse regularmente los pacientes de diabetes.

Para crear nuestra aplicación utilizaremos componentes, esquemas prefabricados, gráficas, servicios y ruteo de Angular, así como componentes de Material Design para nuestra interfaz gráfica.

Nuestra aplicación constará de las siguientes características:

1. Registro de mediciones de glucosa.
    
2. Dashboard de resultados con gráficas.
    

#### **NOTA: ESTA ES LA PARTE 1 DE 4 DE LA SERIE DE POSTS "GLTRACK"**

* [GLTrack parte 1: "Schematics, Componentes y Ruteo con Angular + Material".](https://rckstr1.github.io/2019/06/18/GLTrack1.html)
    
* [GLTrack parte 2: "Modelos, servicios, dependency injection, formas y data binding con Angular + Material".](https://rckstr1.github.io/2019/08/07/GLTrack2.html)
    
* [GLTrack parte 3: "Reutiliza componentes. Interacción entre componentes usando @Input() y EventEmmiter con Angular 8".](https://rckstr1.github.io/2019/08/22/GLTrack3.html)
    
* [GLTrack parte 4: "Gráficas con ng2-charts (Chart.js) y Angular 8. Ordena, filtra, mapea y reduce arreglos de objetos.".](https://rckstr1.github.io/2019/09/06/GLTrack4.html)
    

## **PASO 1: CREAR UNA NUEVA APLICACIÓN E INSTALAR ANGULAR MATERIAL**

Comenzaremos creando una aplicación nueva, instalando Angular Material y preparando una interfaz gráfica básica ejecutando los siguientes comandos en la terminal.

```bash
ng new gltrack-app
ng add @angular/material
            
```

![](https://rckstr1.github.io/images/blog/GLTrack1/01-AddMaterial.png align="left")

> *Si necesitas ayuda creando una aplicación de Angular, puedes ver los detalles en el post* [*"¡Hola Angular 8!"*](https://rckstr1.github.io/2019/05/30/HolaAngular8.html)*.*

> *Si necesitas ayuda instalando Angular Material, puedes ver los detalles en el post* [*"Angular + Material"*](https://rckstr1.github.io/2019/06/04/AngularMaterial.html)*.*

## **PASO 2: CREAR MENÚ DE NAVEGACIÓN CON SCHEMATICS DE ANGULAR MATERIAL**

Angular Material incluye esquemas prefabricados que nos permiten construir nuestras aplicaciones de manera más fácil y rápida.

Esta ocasión crearemos un menú de navegación utilizando el schematic 'navigation' para crear un componente que incluye una barra de herramientas con el nombre de la aplicación y una barra de navegación responsiva. En la terminal, ejecuta el siguiente comando:

```bash
ng generate @angular/material:nav components/nav
```

![](https://rckstr1.github.io/images/blog/GLTrack1/02-NavSchematic.png align="left")

Hay que destacar que al indicar “components/\[nombre del nuevo componente\]” estamos creando el nuevo componente dentro de una carpeta “components” que va a contener los componentes de nuestra app. Esto nos permite tener nuestro código mejor organizado.

Después de generar nuestro componente de navegación, podemos ver que se importaron los módulos de Angular Material necesarios de manera automática directamente en el archivo app.module.ts.

Como buena práctica, crearemos un módulo separado para encargarse de importar los módulos de Angular Material con el siguiente comando:

```bash
ng generate module modules/material
```

![](https://rckstr1.github.io/images/blog/GLTrack1/03-MaterialModule.png align="left")

Después, hay que mover las referencias a los módulos de Angular Material de app.module.ts a material.module.ts.

![](https://rckstr1.github.io/images/blog/GLTrack1/04-MoveMaterialModules.png align="left")

![](https://rckstr1.github.io/images/blog/GLTrack1/05-CustomMaterialModule.png align="left")

Ahora, importa el módulo MaterialModule en app.module.ts.

![](https://rckstr1.github.io/images/blog/GLTrack1/06-ImportMaterialModule.png align="left")

## **PASO 3: CREAR COMPONENTES**

Para crear los componentes necesarios para nuestra aplicación, ejecuta:

```bash
ng generate component components/dashboard
ng generate component components/registro
            
```

![](https://rckstr1.github.io/images/blog/GLTrack1/07-CreateComponents.png align="left")

## **PASO 4: PREPARAR NAVEGACIÓN Y RUTEO**

Después de crear los componentes principales que conforman nuestra app, necesitamos permitir que el usuario pueda navegar entre ellos.

### **RUTEO DE ANGULAR**

Actualiza el contenido de la constante “routes” en el archivo app-routing.module.ts como se muestra a continuación:

```javascript
const routes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: '404', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'registro', component: RegistroComponent }
];
        
```

![](https://rckstr1.github.io/images/blog/GLTrack1/08-Routes.png align="left")

De esta manera, estamos registrando las rutas a las que el usuario puede navegar en nuestra aplicación. En la primera ruta, estamos estableciendo un valor predeterminado para cuando el usuario navegue a la raíz de nuestra app, en este caso, estaríamos redirigiendo a la ruta ‘dashboard’.

En la segunda ruta estamos indicando que cuando el usuario navegue por error a alguna ruta que no exista sea redirigido al dashboard.

En las últimas dos rutas estamos indicando las rutas disponibles y el componente que debe mostrarse en cada ruta.

Una vez creadas las rutas, elimina el contenido auto generado en app.component.html para que quede de la siguiente manera:

```xml
<router-outlet></router-outlet>
```

![](https://rckstr1.github.io/images/blog/GLTrack1/09-RouterOutlet.png align="left")

Ahora, navega a las diferentes rutas de la app para comprobar el funcionamiento del ruteo de Angular.

![](https://rckstr1.github.io/images/blog/GLTrack1/10-RouteTest.png align="left")

### **IMPLEMENTAR EL COMPONENTE DE NAVEGACIÓN**

En pasos anteriores creamos un componente de navegación utilizando schematics de Angular Material, para comenzar a utilizar el componente, agrega la siguiente línea al archivo nav.component.html justo al final del bloque “mat-sidenav-content”:

```xml
<ng-content></ng-content>
```

El contenido de nav.component.html debe quedar como se muestra a continuación:

```xml
<mat-sidenav-container class="sidenav-container">

    ...

    <mat-sidenav-content>
    <mat-toolbar color="primary">

    ...

    </mat-toolbar>
    <!-- Add Content Here -->
    <ng-content></ng-content>
    </mat-sidenav-content>
</mat-sidenav-container>
                
```

![](https://rckstr1.github.io/images/blog/GLTrack1/11-NgContent.png align="left")

A continuación, reemplaza los contenidos del archivo app.component.html con lo siguiente:

```xml
<app-nav>
    <router-outlet></router-outlet>
</app-nav>
            
```

![](https://rckstr1.github.io/images/blog/GLTrack1/12-NavComponent.png align="left")

De esta manera, nuestra app muestra el componente de navegación, así como el componente que hayamos indicado en cada una de las rutas registradas para nuestra app en app-routing.module.ts.

[![](https://rckstr1.github.io/images/blog/GLTrack1/13-NavComponentImplementation.png align="left")](https://rckstr1.github.io/images/blog/GLTrack1/13-NavComponentImplementation.png)

### **PREPARAR MENÚ DE NAVEGACIÓN**

Para crear nuestro menú de navegación, en lugar de escribir un menú de opciones estático, comenzaremos creando un arreglo de opciones que, de ser necesario, podríamos modificar de manera dinámica utilizando alguna fuente externa.

Primero, crearemos un nuevo archivo models.ts dentro de un folder nuevo en nuestra app. En el nuevo archivo models.ts, modelaremos una interfaz que usaremos como plantilla para nuestras opciones del menú de navegación:

```typescript
export interface NavMenuItem {
    Label: string;
    Target: string;
}
            
```

![](https://rckstr1.github.io/images/blog/GLTrack1/14-MenuItemModel.png align="left")

Ahora, en el componente de navegación nav.component.ts, crea un arreglo con la lista de opciones que mostraremos en nuestro menú de la siguiente manera:

```typescript
...
        
import { NavMenuItem } from 'src/app/models/models';

...
export class NavComponent {
    menu = [
        { Label: 'Dashboard', Target: '/dashboard' },
        { Label: 'Registro', Target: '/registro' }
    ] as NavMenuItem[];

    ...
}
        
```

![](https://rckstr1.github.io/images/blog/GLTrack1/15-MenuOptionsArray.png align="left")

Después de crear la lista de opciones, actualiza nav.component.html para generar las opciones del menú de navegación de manera dinámica. Elimina las opciones estáticas para incluir lo siguiente:

```xml
...
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
    <a mat-list-item *ngFor="let option of menu"
    [routerLink]="option.Target">{{ option.Label }}</a>
</mat-nav-list>
...
```

![](https://rckstr1.github.io/images/blog/GLTrack1/16-DynamicMenu.png align="left")

De esta manera, se estará generando una opción en el menú por cada objeto en nuestro arreglo de opciones y ahora podemos utilizar el menu para navegar entre las rutas de la aplicación.

## **CONCLUSIÓN**

En este post vimos los pasos necesarios para generar componentes de Angular 8 en blanco, así como utilizando esquemas prefabricados (schematics). También utilizamos las características básicas del ruteo de Angular.

En la segunda parte de este post, continuaremos agregando funcionalidad a nuestra app implementando modelos de datos, formas de angular y data binding, así como servicios para leer y escribir datos.

[![](https://rckstr1.github.io/images/blog/GLTrack1/17-ItWorks.png align="left")](https://rckstr1.github.io/images/blog/GLTrack1/17-ItWorks.png)

El código fuente completo de la aplicación de ejemplo puedes encontrarlo en GitHub, en [https://github.com/RCKSTR1/GLTrack1](https://github.com/RCKSTR1/GLTrack1) o si prefieres, puedes clonar el repositorio directo en [https://github.com/RCKSTR1/GLTrack1.git](https://github.com/RCKSTR1/GLTrack1.git)

Si tuviste algún problema o duda al seguir los pasos, o si tienes alguna pregunta acerca de este post, contáctame en Twitter, Facebook o LinkedIn.

**Es cuánto.**

## **FUENTES**

* Documentación de Angular Material, "Schematics". [https://material.angular.io/guide/schematics](https://material.angular.io/guide/schematics)
    
* Documentación de Angular. "Arquitectura, Introducción a los módulos"[https://angular.io/guide/architecture-modules](https://angular.io/guide/architecture-modules)
    
* Documentación de Angular, "Fundamentos, Ruteo y navegación" [https://angular.io/guide/router](https://angular.io/guide/router)