PRÁCTICA #7 INTRODUCCIÓN A ANGULAR 5
Práctica #7
Objetivo
• Cambiar al componente principal para que muestre un menú y utilice rutas
• Cambiar el componente de lista de alumnos para que la comunicación sea a través de las
rutas y que el listado de alumnos se realice utilizando el componente mat-Table de
Angular Material
• Utilizar la funcionalidad de routing de Angular para navegar y pasar datos entre
componentes.
1) Estructura de los cambios que vamos a realizar
Guarde una copia de la aplicación tal cual la hemos desarrollado hasta ahora, así tendrá una
referencia de cómo hemos implementado los conceptos del curso hasta el momento.
2) Creación de los nuevos componentes
Vamos a crear dos componentes nuevos. Estos componentes no tendrán funcionalidad
especifica más que la de mostrar cómo utilizamos las rutas de Angular.
• Si no tiene abierto el proyecto de las prácticas, ábralo con Visual Studio Code.
• Abra la terminal (CTRL + ñ) y ejecute el siguiente comando:
ng generate component asistencias
• Esto generará un componente llamado asistencias en la carpeta asistencias. Cuando
finalice su ejecución ejecute el siguiente comando:
ng generate component cursos
3) Definir las rutas de los nuevos componentes
Comenzaremos ahora a definir la infraestructura del Routing, para ello:
• Edite el archivo [Link]
• Agregue el import del módulo del router de Angular
import{ RouterModule } from'@angular/router';
© Adrian García San Martín 2017-2018 - todos los derechos reservados.
Prohibida su reproducción total o parcial.
PRÁCTICA #7 INTRODUCCIÓN A ANGULAR 5
Agregue las rutas a los componentes modificando el array deimports del módulo:
imports: [
BrowserModule,
MatToolbarModule,
MatCardModule,
MatIconModule,
MatListModule,
MatInputModule,
MatFormFieldModule,
FormsModule,
BrowserAnimationsModule,
MatSelectModule,
MatCheckboxModule,
MatRadioModule,
MatButtonModule,
[Link]([
{ path: 'alumnos' , component: AlumnosListaComponent},
{ path: 'cursos' , component: CursosComponent},
{ path: 'asistencias' , component: AsistenciasComponent},
{ path: '', redirectTo: '/alumnos', pathMatch: 'full' }
])
],
Hemos definido 3 rutas por ahora: alumnos, cursos, asistencias, vinculadas con sus respectivos
componentes. Más adelante agregaremos la ruta para la edición de alumno.
Vea que además hemos creado una ruta de redireccionamiento que se utilizara cuando se
navegue a la url base de la aplicación.
• Guarde los cambios del módulo.
4) Modificación de [Link]
Al componente [Link] vamos a agregar un menú en la parte lateral izquierda de la
pantalla que nos servirá para navegar por diferentes partes de nuestra aplicación.
• Vamos a cambiar el html. Edite el archivo [Link] y reemplácelo con la
nueva estructura:
© Adrian García San Martín 2017-2018 - todos los derechos reservados.
Prohibida su reproducción total o parcial.
PRÁCTICA #7 INTRODUCCIÓN A ANGULAR 5
<mat-toolbarcolor="primary"class="mat-elevation-z3">
<span>Gestión de cursos y alumnos</span>
</mat-toolbar>
<divclass="content">
<divclass="menu">
<arouterLink="/alumnos"routerLinkActive="activo">
<iclass="material-icons">people</i><br/>
Alumnos
</a>
<arouterLink="/cursos"routerLinkActive="activo">
<iclass="material-icons">event</i><br/>
Cursos
</a>
<arouterLink="/asistencias"routerLinkActive="activo">
<iclass="material-icons">assignment_turned_in</i><br/>
Asistencias
</a>
</div>
<divclass="contenido">
<router-outlet></router-outlet>
</div>
</div>
Revise el código html. Vea el cómo hemos utilizado la directiva routerlink para vincular el
hipervínculo con la ruta. Vea también cómo asignamos la clase activo a la ruta activa a través
de la directiva routerLinkActive. Esta clase CSS la crearemos en el siguiente punto.
Ahora vamos a tener dos paneles verticales, uno para el menú a la derecha y otro para el
contenido. Vamos a cambiar las reglas CSS para reflejar estos cambios.
• Edite el archivo [Link]
• Reemplace la clase .content por
.content {
margin: 3em;
display: grid;
© Adrian García San Martín 2017-2018 - todos los derechos reservados.
Prohibida su reproducción total o parcial.
PRÁCTICA #7 INTRODUCCIÓN A ANGULAR 5
grid-gap: 5px;
grid-template-columns: 200px1fr;
grid-template-rows: 1fr;
}
Vea que ahora el template de columnas refleja dos columnas, una con un ancho fijo.
• Agregue las siguientes reglas css
.all-width {
width: 100%;
}
.menu {
background-color: #444;
position: absolute;
top: 64px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
color: rgba( 255,255,255, 0.85);
font-size: 16px;
}
.menu a , .menu a:visited {
color: rgba( 255,255,255, 0.85);
}
.menu a {
display: block;
margin-top: 60px;
margin-left: 30px;
padding: 16px;
width: 100px;
border-radius: 4px;
text-decoration: none;
transition: background-color 1slinear;
font-family: Roboto, Arial, Helvetica, sans-serif;
}
.menu a i {
© Adrian García San Martín 2017-2018 - todos los derechos reservados.
Prohibida su reproducción total o parcial.
PRÁCTICA #7 INTRODUCCIÓN A ANGULAR 5
font-size: 48px;
color: rgba( 255,255,255, 0.85);
transition: background-color 1slinear;
}
.menu a:hover, .menu a:hover i{
background-color: #eee;
color: #444;
transition: background-color 1slinear;
}
.contenido {
background-color: #fcfcfc;
position: absolute;
top: 64px;
bottom: 0px;
left: 200px;
right: 0px;
padding: 16px;
}
.activo {
border: 2pxsolidrgba(64,240,200, .7);
}
Estas reglas dan el estilo al menú y a los paneles.
• Guarde los cambios y pruebe la aplicación. Navegue por el menú y observe como cambian
las URL en el navegador. Pruebe de ingresar alguna URL a mano. Vea que es lo que pasa
cuando entramos a Alumnos. Esto lo solucionaremos en el siguiente punto
5) Modificar el componente alumno-lista
En este componente realizaremos varios cambios:
✓ Desacoplar los eventos y propiedades de Input que lo vinculaban con el componente
principal
✓ Utilizar directamente el servicio de alumnos ya que la lista de alumnos no va a ser provista
por el componente padre
✓ Utilizar el componente mat-Table de Angular Material para mostrar la lista de alumnos
✓ Adaptar los elementos de la interface de la versión anterior
• Edite el código del archivo [Link]
© Adrian García San Martín 2017-2018 - todos los derechos reservados.
Prohibida su reproducción total o parcial.
PRÁCTICA #7 INTRODUCCIÓN A ANGULAR 5
• Realice los cambios que están resaltados:
import{ Component, OnInit, Input, Output, EventEmitter }
from'@angular/core';
import{ ItemListService } from'../[Link]';
import{ AlumnosService } from '../[Link]';
import{ Alumno } from'../alumno';
import{ ItemList } from'../ItemList';
@Component({
selector:'app-alumnos-lista',
templateUrl:'./[Link]',
styleUrls: ['./[Link]']
})
exportclassAlumnosListaComponentimplementsOnInit {
alumnos: Alumno[];
alumnoSeleccionado: Alumno = null;
constructor(
publicItemListSrv: ItemListService,
publicAlumnosSrv: AlumnosService
) { }
ngOnInit() {
[Link] = [Link]();
}
AlumnoSelect(alumno: Alumno) {
[Link] = alumno;
// [Link]([Link]);
}
EstaSeleccioando(alumno: Alumno) {
if( [Link] ) {
[Link] === [Link];
} else {
returnfalse;
}
}
Agregar() {
// [Link]();
}
© Adrian García San Martín 2017-2018 - todos los derechos reservados.
Prohibida su reproducción total o parcial.
PRÁCTICA #7 INTRODUCCIÓN A ANGULAR 5
Filtrar(filtro: string) {
// [Link](filtro);
}
}
Las modificaciones que hemos realizados son:
✓ Hemos utilizado el servicio AlumnosServicey obtenemos el array de alumnos en el
OnInit()
✓ Hemos eliminado todos los eventos que emitía el componente
✓ Hemos eliminado los @Input de las propiedades.
• Salve los cambios y pruebe la aplicación. Ingrese a la opción de alumnos. El resultado debe
ser similar a este:
• Edite el archivo [Link] y modifique la regla :host de la siguiente
forma:
:host {
position: absolute;
left: 8px;
top: 8px;
right: 8px;
bottom: 8px;
}
© Adrian García San Martín 2017-2018 - todos los derechos reservados.
Prohibida su reproducción total o parcial.
PRÁCTICA #7 INTRODUCCIÓN A ANGULAR 5
• Salve los cambios y vea el cómo se ha acomodado el botón de agregar alumnos
Nos queda ahora utilizar el mat-table para mostrar los alumnos reemplazando a los mat-lisy t
mat-listitems
• Edite el archivo [Link].
• Agregue estos dos imports
import{ MatTableModule } from'@angular/material/table';
import{ MatMenuModule } from'@angular/material/menu';
• Recuerde de agregar estos dos nuevos módulos a la lista de array de imports del módulo
MatTableModule,
MatMenuModule,
• Guarde los cambios
• Edite el archivo [Link]
• Comente todo el elemento mat-card
<divclass="search-box">
<mat-icon>search</mat-icon>
<mat-form-field>
<inputmatInput #filtrarplaceholder="filtrar..."
(keyup)="Filtrar([Link])">
</mat-form-field>
</div>
<!--<mat-cardclass="lista">
<mat-list>
<mat-list-item
*ngFor="let alumno of alumnos"
class="alumno-list-item"
(click)="AlumnoSelect( alumno )"
[[Link]-seleccionado] = EstaSeleccioando(alumno)>
<div mat-line>
<h2>
<mat-iconclass="avatar">account_circle</mat-icon>
{{[Link]}} {{[Link]}}
</h2>
</div>
© Adrian García San Martín 2017-2018 - todos los derechos reservados.
Prohibida su reproducción total o parcial.
PRÁCTICA #7 INTRODUCCIÓN A ANGULAR 5
<p mat-line>
Perfil: {{ [Link]([Link]) }}<br><br>
</p>
</mat-list-item>
</mat-list>
</mat-card> -->
<buttonmat-fabclass="add-button" (click)="Agregar()">+</button>
• Después del div class=”search-box” agregue el siguiente fragmento de HTML
<divclass="tabla mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">
<!-- Position Column -->
<ng-containermatColumnDef="id">
<mat-header-cell *matHeaderCellDef> Id. </mat-header-cell>
<mat-cell *matCellDef="letelement"> {{[Link]}} </mat-cell>
</ng-container>
<ng-containermatColumnDef="nombre">
<mat-header-cell *matHeaderCellDef> Nombre </mat-header-cell>
<mat-cell *matCellDef="letelement"> {{[Link]}} </mat-cell>
</ng-container>
<ng-containermatColumnDef="apellido">
<mat-header-cell *matHeaderCellDef> Apellido </mat-header-cell>
<mat-cell *matCellDef="letelement"> {{[Link]}} </mat-cell>
</ng-container>
<ng-containermatColumnDef="perfil">
<mat-header-cell *matHeaderCellDef> Perfil </mat-header-cell>
<mat-cell *matCellDef="letelement">{{ItemListSrv
.Perfiles([Link])}} </mat-cell>
</ng-container>
<ng-containermatColumnDef="sexo">
<mat-header-cell *matHeaderCellDef> Sexo </mat-header-cell>
<mat-cell *matCellDef="letelement"> {{ItemListSrv
© Adrian García San Martín 2017-2018 - todos los derechos reservados.
Prohibida su reproducción total o parcial.
PRÁCTICA #7 INTRODUCCIÓN A ANGULAR 5
.Sexos([Link])}} </mat-cell>
</ng-container>
<ng-containermatColumnDef="activo">
<mat-header-cell *matHeaderCellDef> Activo </mat-header-cell>
<mat-cell *matCellDef="letelement"> {{[Link]}} </mat-cell>
</ng-container>
<ng-containermatColumnDef="acciones">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="letelement">
<buttonmat-button [matMenuTriggerFor]="menu"class="accion"><mat-
icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<buttonmat-menu-item>Editar</button>
<buttonmat-menu-item>Eliminar</button>
<buttonmat-menu-item>Cursos aprobados</button>
<buttonmat-menu-item>Asistencia</button>
</mat-menu>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="letrow; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
Este código utiliza el mat-table y sus elementos asociados. Adicionalmente vamos a tener una
columna que mostrará un menú popup que nos permitirá realizar acciones sobre un alumno.
Para más información: [Link] y
[Link]
Verá que VSCode marca dos errores, uno en el atributo datasource y otro en el atributo
displayedColumns. Estos atributos corresponden al origen de datos, que será nuestro array de
alumnos y el otro a un array con el nombre de las columnas que mostraremos. Vamos a
proveer estos valores en forma programática.
• Edite el código del archivo [Link]
• Agregue el siguiente import
import{ Component, OnInit, Input } from'@angular/core';
import{ MatTableDataSource } from '@angular/material';
import{ ItemListService } from'../[Link]';
© Adrian García San Martín 2017-2018 - todos los derechos reservados.
Prohibida su reproducción total o parcial.
PRÁCTICA #7 INTRODUCCIÓN A ANGULAR 5
import{ AlumnosService } from'../[Link]';
Este import nos proveerá acceso al objeto datasource
• Agregue estas dos propiedades
exportclassAlumnosListaComponentimplementsOnInit {
alumnos: Alumno[];
alumnoSeleccionado: Alumno = null;
dataSource: MatTableDataSource<Alumno>;
displayedColumns = ['id', 'nombre', 'apellido', 'perfil', 'sexo',
'activo', 'acciones'];
constructor(
• Luego en la función OnInit() agregue la línea que está resaltada
ngOnInit() {
[Link] = [Link]();
[Link] = new MatTableDataSource([Link]);
}
Es decir, cada vez que se muestre el componente, asignaremos el datasource con el array de
alumnos.
Ahora vamos a recuperar la funcionalidad de filtrar alumnos.
• Modifique la función Filtrar() de esta forma
Filtrar(filtro: string) {
[Link] = [Link](filtro);
[Link] = new MatTableDataSource([Link]);
}
• Guarde los cambios y pruebe la aplicación
© Adrian García San Martín 2017-2018 - todos los derechos reservados.
Prohibida su reproducción total o parcial.
PRÁCTICA #7 INTRODUCCIÓN A ANGULAR 5
6) Editar un alumno de la lista de alumnos activando el
componente de edición
Vamos a agregar la funcionalidad de editar la lista de alumnos llamando al componente
[Link] vez que se seleccione una fila de la lista de alumnos.
• Agregue la nueva ruta en la configuración del router en el [Link]:
[Link]([
{ path:'alumnos' , component:AlumnosListaComponent},
{ path:'cursos' , component:CursosComponent},
{ path:'asistencias' , component:AsistenciasComponent},
{ path:'', redirectTo:'/alumnos', pathMatch:'full' },
{ path: 'alumno/:id' , component: AlumnoEdicionComponent},
])
• Guarde los cambios
• Edite el template del componente alumnos-lista que se encuentra en alumnos-
[Link].
• Agregue en el primer botón de componente mat-menulo siguiente:
<ng-containermatColumnDef="acciones">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="letelement">
<buttonmat-button [matMenuTriggerFor]="menu"class="accion"><mat-
icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<buttonmat-menu-item(click)="EditarAlumno(element)">
Editar
</button>
<buttonmat-menu-item>Eliminar</button>
<buttonmat-menu-item>Agregar a curso</button>
<buttonmat-menu-item>Asistencia</button>
</mat-menu>
</mat-cell>
</ng-container>
• Guarde los cambios
• Edite el código del componente ([Link]) y agregue el siguiente
import para poder navegar a una ruta desde nuestro código:
© Adrian García San Martín 2017-2018 - todos los derechos reservados.
Prohibida su reproducción total o parcial.
PRÁCTICA #7 INTRODUCCIÓN A ANGULAR 5
import{ Router } from'@angular/router';
• Inyecte el Router en el constructor para utilizarlo más tarde, agregue esto en la
declaración del constructor:
constructor(
publicItemListSrv: ItemListService,
publicAlumnosSrv: AlumnosService,
private _router: Router,
) { }
• Agregue el siguiente método al componente:
EditarAlumno(alumno: Alumno) {
this._router.navigate(['/alumno', [Link]]);
}
Este es el método que será llamado cuando hagamos un click sobre la opción de menú Editar.
Vea como pasamos los parámetros desde la construcción de la vista hasta la navegación de la
ruta.
• Guarde los cambios
Ahora prepararemos primero el componente alumno-edicion para que pueda trabajar con el
parámetro :id que viene en la ruta.
• Edite el archivo [Link].
• Aquí vamos a utilizar el Router, el ActiveRoute y el servicio de alumnos . Para ello agregue
los siguientes imports:
import{ Router, ActivatedRoute } from'@angular/router';
import{ AlumnosService } from'../[Link]';
• Elimine el @Input() de la propiedad alumnoSeleccionado y comente el evento
FinDeEdicion
© Adrian García San Martín 2017-2018 - todos los derechos reservados.
Prohibida su reproducción total o parcial.
PRÁCTICA #7 INTRODUCCIÓN A ANGULAR 5
exportclassAlumnoEdicionComponentimplementsOnInit {
alumnoSeleccionado: Alumno;
// @Output() FinDeEdicion = new EventEmitter<Operaciones>();
• Reemplace el constructor por el siguiente para inyectar el servicio de alumnos, el Router y
el ActiveRoute en el componente:
constructor(
publicItemListSrv: ItemListService,
private _router: Router,
private _activeRoute: ActivatedRoute,
private _alumnosSrv: AlumnosService
) { }
• Agregue el siguiente código al evento ngInit()
ngOnInit() {
constid = Number( this._activeRoute.[Link]('id')) ;
[Link] = this._alumnosSrv.Get(id);
}
Aquí lo que hemos hecho es obtener el parámetro id de la url, llamar al servicio de alumnos
para obtener el alumno para editar en el template.
• Modifique los métodos Regresar() y Guardar():
Regresar() {
// [Link] = null;
// [Link]('cancelar');
this._router.navigate(['/alumnos']);
}
Guardar(form: any) {
[Link](form);
[Link](form).forEach((key, index) =>
[Link][key] = form[key]
© Adrian García San Martín 2017-2018 - todos los derechos reservados.
Prohibida su reproducción total o parcial.
PRÁCTICA #7 INTRODUCCIÓN A ANGULAR 5
);
if ([Link] == 0) {
// [Link]('agregar');
} else {
// [Link]('editar');
this._alumnosSrv.Update([Link]);
[Link]();
}
}
El método Regresar navega a la ruta /alumnos. El método Guardar llama al servicio de
alumnos para guardar los cambios y luego regresa a la lista de alumnos.
• Guarde los cambios y pruebe la aplicación ahora.
7) Desafío: funcionalidad de agregary eliminar alumnos
El objetivo es modificar el componente [Link] para que reciba un
parámetro adicional que indique si la operación es agregar o modificar.
Recuerde que si deseo utilizar varios parámetros en una ruta debo definirla de esta forma:
{ path: 'alumno/:operacion/:id' , component: AlumnoEdicionComponent},
Los pasos para realizar esto son:
a) Modificar la ruta en el módulo
b) Modificar el componente [Link] para que lea el parámetro de la
operación (agregar o editar) y actúe en consonancia con el mismo.
c) Modificar el [Link] para que cuando se seleccione un
alumno pase el parámetro de operación “editar”.
d) Modificar el mismo componente para que cuando presione el botón de agregar alumno
active la ruta correspondiente pasándole al parámetro operación el valor “agregar”.
e) Implemente la eliminación de alumnos que se encuentra en el menú de acciones de la
tabla
© Adrian García San Martín 2017-2018 - todos los derechos reservados.
Prohibida su reproducción total o parcial.