Directivas, routing, sharing data y pipes

Directivas, routing, sharing data y pipes

Directivas

1. Ingrese a su carpeta de componentes.

[pic 1]

1. Reemplace el código de su barra de navegación por el siguiente código

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

  <div class="container-fluid">

    <a class="navbar-brand">Angular</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <ul class="navbar-nav me-auto mb-2 mb-lg-0">

        <li class="nav-item">

          <a class="nav-link" routerLink="/home" routerLinkActive="active">Home</a>

        </li>

        <li class="nav-item">

          <a class="nav-link"  [routerLink]="['directivas']"  routerLinkActive="active" >Directivas</a>

        </li>        

        <li class="nav-item">

          <a class="nav-link">Mis Materias</a>

        </li>

        <li class="nav-item">

          <a class="nav-link">Mis productos</a>

        </li>

      </ul>

      <div class="d-flex" role="search">

        <input class="form-control me-2" type="search" placeholder="Buscar" aria-label="Search">

        <button class="btn btn-outline-success" type="submit">Buscar</button>

      </div>

    </div>

  </div>

</nav>

1. Genere un nuevo componente llamado directivas, “ng g c --skip-tests=true directivas”

[pic 2]

1. Copien y eliminen el código relacionado al laboratorio anterior.

[pic 3]

1. En el componente body, cree una variable llamada “mensaje”

[pic 4]

1. En el archivo “body.component.html” coloque el mensaje para que este sea visualizado en la aplicación.

[pic 5]

[pic 6]

Routing

1. Ingrese a su carpeta de app.

[pic 7]

1. Genere el componente routing el cual permitirá a su aplicación comportarse como una SPA, “ng generate module app-routing --flat --module=app”.

 [pic 8]

1. Reemplace el código del archivo “app-routing.module.ts” por el siguiente código.

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

import { RouterModule, Routes } from '@angular/router';

const ROUTES : Routes = [];

@NgModule({

  imports: [RouterModule.forRoot(ROUTES)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

1. Mapeemos las rutas de nuestros componentes existentes.

[pic 9]

Nota: el valor del “path” corresponde al dato que será referenciado desde nuestra barra de navegación, respecto a “component”  se utiliza mapea el componente que estará relacionado con el path.

1. En el “header.component.html” se mapeará las referencias hacía nuestras rutas mediante las directivas “routerLink” y “routerLinkActive”.

1. Utilice la directiva “routerLink” para colocar la referencia hacía su navegación.
2. La directiva “routerLinkActive” permite marcar el elemento que se encuentra activa y permite resaltar este mediante CSS, ejemplo:   “active”

[pic 10]

1. Agregue la etiqueta “<router-outlet></router-outlet>” y comente la etiqueta “<app-body></app-body>” en el archivo “app.component.html”.

[pic 11]

Pipes y sharing data

1. Posicionarse en la carpeta de componentes

[pic 12]

1. Crear los siguientes componentes

1. Materias: “ng g c --skip-tests=true materias”.
2. Materia: “ng g c --skip-tests=true materia”

[pic 13]

1. Crear dos nuevas carpetas al nivel de la carpeta compontes “services” y “interfaces”.

[pic 14]

1. Posicionarse en la carpeta “services”.

[pic 15]

1. Crear un nuevo servicio “ng generate service materias”.

[pic 16]

1. Registren su servicio e importen la referencia en el módulo de su aplicación “app.module.ts”.

[pic 17]

Nota: Los servicios deben ser importados en la sección de providers.

1. En su carpeta de interfaces, creen una nueva interfaz llamada “Materia.ts” con los siguientes atributos.

[pic 18]

export interface Materia {

...