PREPARAR PROYECTO ANGULAR

1. Crear Proyecto:
ng new NombreProyecto

Luego aceptar la creación del enrutamiento de angular y posteriormente seleccionar css

 2. Instalación de paquetes que se utilizan regularmente en un sistema:
Instalación de Angular Material
ng add @angular/material

Instalación de File-Input (Sirve para adaptar el input file en angular material)

npm install --save @angular-material-components/file-input
Instalación de Moment (Sirve para analizar, validar, manipular y formatear fechas)
npm i moment
Instalación de Material-Moment-Adapter (Sirve para vincular moment con angular material)
npm i @angular/material-moment-adapter
Instalación de Mat-Select-Search (Sirve para la búsqueda dinámica de los clientes)
npm i ngx-mat-select-search
 3. Configuración del tema del sistema:
Dentro de “app” crear “theme.scss” y ingresar el siguiente código;
@import '../node_modules/@angular/material/theming';
@include mat-core();

$my-primary: mat-palette($mat-blue,900);
$my-accent: mat-palette($mat-yellow,500);
$my-theme: mat-light-theme($my-primary,$my-accent);

@include angular-material-theme($my-theme);
Para saber como cambiar el color del tema visitar la siguiente pagina:
https://material-ui.com/customization/color/
También dentro de “angular.json” agregar el archivo “theme.scss”:
 4. Crear Estilo Base
Dentro de “styles.css” ingresar el siguiente código:
*{
--Negro: #000;
--Blanco: #FFF;
--Principal: #0d47a1;
--Secundario1: #CCC;
--Secundario2: #AAA;
--Secundario3: #333;
}
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

.contenedor{
width: 98%;
margin: 1%;
}
.contenedor-form{
margin: auto;
margin-top: 10px;
}

.Grid{
display: -ms-grid;
display: grid;
grid-gap: 10px;
width: 100%;
}
.Grid2-1,.Grid2{
grid-template-columns: 100%;
}
@media (min-width:480px){
.Grid2{
grid-template-columns: 50% 50%;
}
.contenedor-form{
width: 75%;
}
}
@media (min-width:768px){
.Grid2-1{
grid-template-columns: 1fr 2fr;
}
.contenedor-form{
width: 50%;
}
}
@media (min-width:1024px){
}
@media (min-width:1200px){
}
/*====== encabezados de paginas*/
.header-well,.header-well-icon,.header-well-text{
min-height: 150px;
height: auto;
}
.header-well{
position: relative;
}
.header-well-icon,.header-well-text{
position: absolute;
top: 0;
 color: var(--Secundario3);
}
.header-well-icon{
left: 0;
width: 25%;
}
.header-well-icon mat-icon,.header-well-text div{
position: absolute;
top: 50%;
display: block;
width: 100%;
transform: translateY(-50%);
}
.header-well-icon mat-icon{
text-align: center;
font-size: 60px;
}
.header-well-text{
right: 0;
width: 75%;
}
.header-well-text p{
font-size: 16px;
margin: 0;
padding: 0;
}
/*VISTA 1*/
.card-color-title{
background: var(--Principal) !important;
color: var(--Blanco) !important;
}
.card-color-subtitle{
color:var(--Secundario1) !important;
}
.content-input{
width: 100%;
}
.text-center{
text-align: center;
}
.centrar{
display: flex;
align-items: center;
justify-content: center;
}
.container-tabla{
overflow-x: auto !important;
}
.tabla{
min-width: 400px;
width: 100%;
}
th.mat-sort-header-sorted {
color: var(--Negro);
}
::-webkit-scrollbar{
width: 3px;
height: 3px;
}
::-webkit-scrollbar-track{
background: var(--Secundario2);
}
::-webkit-scrollbar-thumb{
background: var(--Principal);
}
::-webkit-scrollbar-corner{
background: var(--Principal);
}

.image-center{
width: 100px;
display:block;
margin:auto;
}
.container-search{
width: 98%;
padding: 1px;
}
.margin-right{
margin-right: 5px !important;
}
.content-radio{
margin-bottom: 10px;
}
.form-radio{
margin: 0 12px;
}
.form-image{
width: 60px;
height: 60px;
margin: 0;
padding: 0;
}
.InputCar{
max-width: 30px !important;
padding: 5px;
outline: none;
border: 1px solid var(--Secundario2);
}
 5. Crear Login y Sistema
ng g c components/login --skipTests
ng g c components/sistema --skipTests
ng g m components/sistema/sistema --flat
ng g c components/sistema/vista0 --skipTests -m="components/sistema/sistema.module.ts" -is
ng g m components/sistema/childRoutes --flat
Dentro de la carpeta “sistema” crear los archivos:
sistema.routes.ts
Después Importar “sistema.module.ts” en “app.module.ts”:
import { SistemaModule } from './components/sistema/sistema.module';
...
...
imports: [
SistemaModule,
],
En “child-routes.module.ts” borrar todo y agregar el siguiente código:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { Vista0Component } from './vista0/vista0.component';

const childRoutes:Routes=[
{path:'',component: Vista0Component},
{path:'**',pathMatch:'full',redirectTo:''}
];

@NgModule({
imports: [RouterModule.forChild(childRoutes)],
exports: [RouterModule]
})
export class ChildRoutesModule { }
En “sistema.routes.ts” agregar el siguiente código:
import { Routes,RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CredencialGuard } from 'src/app/guards/credencial.guard';
import { SistemaComponent } from './sistema.component';

export const SISTEMA_ROUTES: Routes=[

{
path:'sistema',
component: SistemaComponent,
canActivate: [CredencialGuard],
canLoad: [CredencialGuard],
loadChildren:()=>import('./child-routes.module').then(m=>m.ChildRoutesModule),
},
];

@NgModule({
imports: [RouterModule.forChild(SISTEMA_ROUTES)],
exports: [RouterModule]
})
export class SistemaRoutingModule{}
En “app-routing.module.ts” borrar todo y agregar el siguiente código:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

import { SistemaRoutingModule } from './components/sistema/sistema.routes';

import { LoginComponent } from './components/login/login.component';

const APP_ROUTER:Routes=[
{path:'',component: LoginComponent},
{path:'**',pathMatch:'full',redirectTo:''}
];

@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(APP_ROUTER,{useHash:true}),
SistemaRoutingModule
],
exports: [RouterModule]
})
export class AppRoutingModule { }
En “app.component.html” agregar el siguiente código:
<router-outlet></router-outlet>
 6. Agregar datos generales
En el archivo “environment.ts” y “environment.prod.ts” agregar el siguiente código:

title: 'Don Bosco',

url_local: 'http://localhost:4200/',//https://donbosco.tinbolivia.net/ - http://localhost:4200/
url: 'http://localhost/Ariel/server/',//https://donbosco.tinbolivia.net/server/ - http://localhost/Ariel/server/
token: 'Bearer',
menu:[
{
Titulo:'ADMINISTRADOR',
SubTitulo:'Control de Usuario y Personal',
Rol:[0],
},{
Titulo:'CONFIGURACIÓN',
SubTitulo:'Control de Cuentas y Ambientes',
Rol:[0,1],
},{
Icono:'engineering',
Menu:'Configuración',
Rol:[0,1],
Estado:false,
SubMenu:[
{
Rol:[0,1],
Icono:'addchart',
Menu:'Cuentas',
Vista:'/sistema/vista3',
}
]
},{
Icono:'local_atm',
 Menu:'Activos',
Rol:[0,1],
Vista:'/sistema/vista6',
},
],
roles:[
'Administrador',
'Secretaria',
'Responsable',
'Regente',
],
decimales:2,
moneda:'.Bs',
 7. Crear Module de Material
ng g m modules/material --flat
En el archivo “material.module.ts” agregar el siguiente codigo:
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatSidenavModule } from "@angular/material/sidenav";
import { MatIconModule } from "@angular/material/icon";
import { MatToolbarModule } from "@angular/material/toolbar";
import { MatMenuModule } from '@angular/material/menu';
import { MatListModule } from '@angular/material/list';
import { MatDividerModule } from '@angular/material/divider';
import { MatDialogModule } from '@angular/material/dialog';
import { MatTabsModule } from '@angular/material/tabs';
import { MatCardModule } from '@angular/material/card';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSelectModule } from '@angular/material/select';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule,MAT_RADIO_DEFAULT_OPTIONS } from '@angular/material/radio';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { NgxMatFileInputModule } from '@angular-material-components/file-input';
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
...
...
imports: [
 MatInputModule,
MatButtonModule,
MatIconModule,
MatSidenavModule,
MatToolbarModule,
MatMenuModule,
MatDividerModule,
MatListModule,
MatDialogModule,
MatTabsModule,
MatCardModule,
MatSortModule,
MatTableModule,
MatPaginatorModule,
MatSelectModule,
MatAutocompleteModule,
MatProgressSpinnerModule,
MatRadioModule,
MatGridListModule,
MatCheckboxModule,
MatDatepickerModule,
MatNativeDateModule,
MatFormFieldModule,
NgxMatFileInputModule,
NgxMatSelectSearchModule,
],
exports:[
MatInputModule,
MatButtonModule,
MatIconModule,
MatSidenavModule,
 MatToolbarModule,
MatMenuModule,
MatDividerModule,
MatListModule,
MatDialogModule,
MatTabsModule,
MatCardModule,
MatSortModule,
MatTableModule,
MatPaginatorModule,
MatSelectModule,
MatAutocompleteModule,
MatProgressSpinnerModule,
MatRadioModule,
MatGridListModule,
MatCheckboxModule,
MatDatepickerModule,
MatNativeDateModule,
MatFormFieldModule,
NgxMatFileInputModule,
NgxMatSelectSearchModule,
],
providers:[
{//Personaliza la configuracion de los radio button
provide: MAT_RADIO_DEFAULT_OPTIONS,
useValue: { color: 'primary' },
}
],
En “sistema.module.ts” agregar el siguiente codigo:
import { MaterialModule } from '../../modules/material.module';
...
imports: [
MaterialModule,
],
exports: [
MaterialModule,
]
 8. Crear el interceptor
ng g s services/interceptor --skipTests
Luego en el archivo creado borrar todo y agregar el siguiente código:

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

import { HttpInterceptor,HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { environment } from 'src/environments/environment';

@Injectable({
providedIn: 'root'
})
export class InterceptorService implements HttpInterceptor{
Token=environment.token;
constructor() { }
intercept(req:HttpRequest<any>,next:HttpHandler):Observable<HttpEvent<any>>{
const headers=new HttpHeaders({
'Bearer':localStorage.getItem(this.Token)||'',
})
const reqClone=req.clone({headers});
return next.handle(reqClone).pipe(
catchError(this.manejarError)
);
}
manejarError(error:HttpErrorResponse){
console.log('Sucedio un error');
console.log('Registrado en el log file');
console.warn(error);
return throwError('Error Personalizado')
}
}
 9. Crear el Servicio de Validación y El Guard
ng g s services/autenticar --skipTests
En “autenticar.service.ts” ingresar el siguiente código:
import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

import { catchError, map } from 'rxjs/operators'
import { environment } from 'src/environments/environment';
import { of } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class AutenticarService {
private url=environment.url;
constructor(private http:HttpClient){}
Autenticar(){
let Cadena=this.url+'Login/Autenticar';
return this.http.get(Cadena).pipe(
map(resp=>resp['ok']),
catchError(error=>of(false))
);
}
}
Crear el Guard y Seleccionar “CanActivate”
ng g guard guards/credencial --skipTests
En credencial.guard.ts ingresar el siguiente código:
import { Injectable } from '@angular/core';
import { CanActivate, CanLoad, Route, UrlSegment, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators'
import { AutenticarService } from '../services/autenticar.service';

@Injectable({
providedIn: 'root'
})
export class CredencialGuard implements CanActivate, CanLoad {
constructor(private autenticar:AutenticarService,private router:Router){}
canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot):boolean/*Observable<boolean>*/{
return true;
/*return this.autenticar.Autenticar()
.pipe(
tap(estaAutenticado=>{
if(!estaAutenticado)
this.router.navigateByUrl('/login');
})
);*/
}
canLoad(route: Route,segments: import('@angular/router').UrlSegment[]):boolean/*Observable<boolean>*/{
return true;
/*return this.autenticar.Autenticar()
.pipe(
tap(estaAutenticado=>{
if(!estaAutenticado)
this.router.navigateByUrl('/login');
})
);*/
}
}
 10. Agregar todo lo necesario a app.module.ts
Agregar:
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { InterceptorService } from './services/interceptor.service';
...
@NgModule({
imports: [
HttpClientModule,
],
providers: [
{
provide:HTTP_INTERCEPTORS,
useClass: InterceptorService,
multi:true
}
]
})
 11. Agregar todo lo necesario a sistema.module.ts
Agregar:
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
...
imports: [
FormsModule,
ReactiveFormsModule,
],
exports: [
FormsModule,
ReactiveFormsModule,
],
 12. Crear Mensaje, Confirmación y Promt
ng g c dialogs/alerta --skipTests -is -m="components/sistema/sistema.module.ts"
ng g c dialogs/promt --skipTests -is -m="components/sistema/sistema.module.ts"
ng g c dialogs/confirm --skipTests -is -m="components/sistema/sistema.module.ts"
En “alerta.component.html” borrar todo e ingresar el siguiente código:

<mat-dialog-content class="mat-typography">
<img [src]="data.imagen | domseguro:UrlLocal" class="image-center">
<h2 mat-dialog-title>{{data.titulo}}</h2>
<h3>{{data.subtitulo}}</h3>
</mat-dialog-content>
<mat-dialog-actions align="center">
<button mat-button color="primary" mat-dialog-close>Aceptar</button>
</mat-dialog-actions>
En “alerta.component.ts” borrar todo e ingresar el siguiente código:

import { Component, OnInit, Inject } from '@angular/core';

import {MAT_DIALOG_DATA} from '@angular/material/dialog';

import { environment } from 'src/environments/environment';

@Component({
selector: 'app-alerta',
templateUrl: './alerta.component.html',
styles: []
})
export class AlertaComponent implements OnInit {
UrlLocal=environment.url_local
constructor(@Inject(MAT_DIALOG_DATA) public data:any){}
ngOnInit(): void{}
}
En “promt.component.html” borrar todo e ingresar el siguiente código:

<h2 mat-dialog-title>{{data.titulo}}</h2>
<mat-dialog-content class="mat-typography">
<mat-form-field>
<mat-label>{{data.subtitulo}}</mat-label>
<input matInput [(ngModel)]="data.value">
</mat-form-field>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button color="warn" mat-dialog-close>No</button>
<button mat-button color="primary" [mat-dialog-close]="data.value" cdkFocusInitial>Si</button>
</mat-dialog-actions>
En “promt.component.ts” borrar todo e ingresar el siguiente código:

import { Component, OnInit, Inject } from '@angular/core';

import {MAT_DIALOG_DATA} from '@angular/material/dialog';

@Component({
selector: 'app-promt',
templateUrl: './promt.component.html',
styles: [
]
})
export class PromtComponent implements OnInit {
constructor(@Inject(MAT_DIALOG_DATA) public data:any) {}
ngOnInit():void{}
}
En “confirm.component.html” borrar todo e ingresar el siguiente código:

<h2 mat-dialog-title>{{data.titulo}}</h2>
<mat-dialog-content class="mat-typography">
<h3>{{data.subtitulo}}</h3>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button color="warn" mat-dialog-close>No</button>
<button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>Si</button>
</mat-dialog-actions>
En “confirm.component.ts” borrar todo e ingresar el siguiente código:

import { Component, OnInit, Inject } from '@angular/core';

import {MAT_DIALOG_DATA} from '@angular/material/dialog';

@Component({
selector: 'app-confirm',
templateUrl: './confirm.component.html',
styles: [
]
})
export class ConfirmComponent implements OnInit {
constructor(@Inject(MAT_DIALOG_DATA) public data:any) {}
ngOnInit(): void {}
}
 13. Agregar Dialogs a “sistema.modules”

import { ConfirmComponent } from '../../dialogs/confirm/confirm.component';

import { AlertaComponent } from '../../dialogs/alerta/alerta.component';
import { PromtComponent } from '../../dialogs/promt/promt.component';
import { DomseguroPipe } from '../../pipes/domseguro.pipe';
...
...
declarations: [
ConfirmComponent,
AlertaComponent,
PromtComponent,
DomseguroPipe,
],
entryComponents:[
AlertaComponent,
ConfirmComponent,
PromtComponent,
]
 14. Agregar Directiva para sidenav responsive
ng g d directives/sidenav --flat --export --skipTests -m="components/sistema/sistema.module.ts"

Una vez creado reemplazar con el siguiente código:

import { Directive, Input, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from "@angular/router";
import { BreakpointObserver } from "@angular/cdk/layout";
import { MatSidenav } from "@angular/material/sidenav";
import { Subject } from "rxjs";
import { map, takeUntil, filter } from "rxjs/operators";

@Directive({
selector: '[permanentAt]'
})
export class SidenavDirective implements OnInit,OnDestroy{
@Input() canOpen = () => true;
@Input() permanentAt: number;
destroy$ = new Subject();
constructor(private router: Router,private breakpoint: BreakpointObserver,private sidenav: MatSidenav) {}
ngOnInit() {
const permanent$ = this.breakpoint
.observe(`(min-width: ${this.permanentAt}px)`)
.pipe(
takeUntil(this.destroy$),
map(({ matches }) => matches)
);
permanent$.subscribe(permanent => {
this.sidenav.mode = permanent ? "side" : "over";
this.sidenav.opened = permanent && this.canOpen();
});
this.router.events
 .pipe(
takeUntil(this.destroy$),
filter(() => this.sidenav.mode === "over"),
filter(event => event instanceof NavigationEnd)
)
.subscribe(() => this.sidenav.close());
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}
 15. Crear Servicio de Validación
ng g s services/validacion --skipTests
Borrar todo y agregar el siguiente código:

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

@Injectable({
providedIn: 'root'
})
export class ValidacionService {
constructor(){}
numerosLetras(Tecla:number){//0-9A-Za-z
return Tecla>47&&Tecla<58||Tecla>64&&Tecla<91||Tecla>96&&Tecla<123;
}
numeros(Tecla:number){//0-9
return Tecla>47&&Tecla<58;
}
letras(Tecla:number){//A-Za-zÁÉÍÑÓÚáéíñóú
return Tecla>64&&Tecla<91||Tecla>96&&Tecla<123||Tecla==193||Tecla==201||Tecla==205||Tecla==209||Tecla==211||Tecla==218||Tecla==
225||Tecla==233||Tecla==237||Tecla==241||Tecla==243||Tecla==250;
}
letrasEspacio(Tecla:number){// A-Za-zÁÉÍÑÓÚáéíñóú
return Tecla==32||Tecla>64&&Tecla<91||Tecla>96&&Tecla<123||Tecla==193||Tecla==201||Tecla==205||Tecla==209||Tecla==211||Tecla==2
18||Tecla==225||Tecla==233||Tecla==237||Tecla==241||Tecla==243||Tecla==250;
}
numerosLetrasEspacio(Tecla:number){// 0-9A-Za-zÁÉÍÑÓÚáéíñóú
return Tecla==32||Tecla>47&&Tecla<58||Tecla>64&&Tecla<91||Tecla>96&&Tecla<123||Tecla==193||Tecla==201||Tecla==205||Tecla==209||
Tecla==211||Tecla==218||Tecla==225||Tecla==233||Tecla==237||Tecla==241||Tecla==243||Tecla==250;
}
direccion(Tecla:number){// ,-.#0-9A-Za-zÁÉÍÑÓÚáéíñóú
 return Tecla==32||Tecla==35||Tecla>43&&Tecla<47||Tecla>47&&Tecla<58||Tecla>64&&Tecla<91||Tecla>96&&Tecla<123||Tecla==193||Tecla
==201||Tecla==205||Tecla==209||Tecla==211||Tecla==218||Tecla==225||Tecla==233||Tecla==237||Tecla==241||Tecla==243||Tecla==250;
}
detalle(Tecla:number){// ,.0-9A-Za-zÁÉÍÑÓÚáéíñóú
return Tecla==13||Tecla==32||Tecla==44||Tecla==46||Tecla>47&&Tecla<58||Tecla>64&&Tecla<91||Tecla>96&&Tecla<123||Tecla==193||Tec
la==201||Tecla==205||Tecla==209||Tecla==211||Tecla==218||Tecla==225||Tecla==233||Tecla==237||Tecla==241||Tecla==243||Tecla==250;
}
precio(Tecla:number){//.0-9
return Tecla==46||Tecla>47&&Tecla<58;
}
fecha(Tecla:number){//-0-9
return Tecla==45||Tecla>47&&Tecla<58;
}
facturacion(Tecla:number){//-0-9A-F
return Tecla==45||Tecla>47&&Tecla<58||Tecla>64&&Tecla<71;
}
fechaActual(){
let Aux=new Date();
return Aux.getDate()+'-'+Aux.getMonth()+'-'+Aux.getFullYear();
}
}
 16. Agregar Pipe Validación Menú:
ng g p pipes/menu --skipTests
ng g p pipes/domseguro --skipTests -m="components/sistema/sistema.module.ts"
Borrar todo y agregar el siguiente código en “menu.pipe.ts”:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'menu'
})
export class MenuPipe implements PipeTransform {
transform(Valor:number,Arreglo:number[]):boolean{
return Arreglo.includes(Valor);
}
}
Borrar todo y agregar el siguiente código en “domseguro.pipe.ts”:

import { Pipe, PipeTransform } from '@angular/core';

import { DomSanitizer } from '@angular/platform-browser'

@Pipe({
name: 'domseguro'
})
export class DomseguroPipe implements PipeTransform {
constructor(private domSanitizer:DomSanitizer){}
transform(value: string, url?:string): any {
let imagen=(url==null)?value:url+'assets/img/'+value;
return this.domSanitizer.bypassSecurityTrustResourceUrl(imagen);
}
}
 17. Dar apariencia a sistema
En “sistema.component.css” agregar el siguiente estilo:
*{
--Color1: #000a12;
--Color2: #37474f;
--Color3: #102027;
--Color4: #dddddd;
--Color5: #ffffff;
}
.color-primary {
background: var(--Color3);
color: var(--Color4);
}
mat-sidenav-container {
height: 100%;
}
.example-spacer {
flex: 1 1 auto;
}
/*Cabecera side nav*/
mat-sidenav {
width: 280px;
}
.sidenav-logo {
width: 40px;
height: 40px;
}
.sidenav-submenu {
width: 240px;
}
.sidenav-user {
 width: 100%;
}
.sidenav-avatar {
display: block;
margin: auto;
width: 100px;
height: 100px;
}
.sidenav-info {
margin-top: 20px;
margin-bottom: 20px;
}
.sidenav-name {
text-align: center;
font-size: 15px;
}
.sidenav-email {
text-align: center;
font-size: 12px;
font-weight: bold;
}
.sidenav-menu {
width: 100%;
}
.sidenav-item {
padding: 12px;
}
.sidenav-item-title {
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
}
.sidenav-item-subtitle {
text-transform: capitalize;
font-size: 11px;
}
.sidenav-button {
color: var(--Color5);
background: var(--Color3);
}
.sidenav-button mat-icon {
color: var(--Color5);
}
.sidenav-button:hover {
background: var(--Color2);
}
.background-submenu {
background: var(--Color1);
}
.background-submenu:hover {
background: var(--Color2);
}

En “sistema.component.html” agregar el siguiente código:

<mat-sidenav-container>
<mat-sidenav [permanentAt]='960' #start [mode]="'side'" class='color-primary'>
<mat-toolbar class='color-primary'>
<embed src='./assets/img/logo.png' class='sidenav-logo'>
<span class='example-spacer'></span>
<button mat-button [matMenuTriggerFor]='menu' mat-icon-button>
<mat-icon>account_circle</mat-icon>
 </button>
<mat-menu #menu='matMenu'>
<mat-list class='sidenav-submenu'>
<button mat-menu-item routerLink='/sistema/vista0'>
<mat-icon>account_circle</mat-icon>
<span>Perfil</span>
</button>
<mat-divider></mat-divider>
<button mat-menu-item (click)="cerrar()">
<mat-icon>power_settings_new</mat-icon>
<span>Salir</span>
</button>
</mat-list>
</mat-menu>
<button mat-button mat-icon-button (click)='info()'>
<mat-icon>help</mat-icon>
</button>
</mat-toolbar>
<div class='sidenav-user'>
<embed src='./assets/img/logo.png' class='sidenav-avatar'>
<div class='sidenav-info'>
<div class='sidenav-name'>{{datos['nombre']}}</div>
<div class='sidenav-email'>{{roles[rol]}}</div>
</div>
</div>
<div class='sidenav-menu'>
<div *ngFor='let sidenav of MENU'>
<div class='sidenav-item' *ngIf='sidenav.Titulo && rol | menu:sidenav.Rol'>
<div class='sidenav-item-title'>{{sidenav.Titulo}}</div>
<div class='sidenav-item-subtitle'>{{sidenav.SubTitulo}}</div>
</div>
 <button mat-menu-item class='sidenav-
button' [routerLink]='sidenav.Vista' *ngIf='sidenav.Menu && rol | menu:sidenav.Rol' (click)='sidenav.Estado=!sidenav.Estado'>
<mat-icon>{{sidenav.Icono}}</mat-icon>
<span>{{sidenav.Menu}}</span>
<mat-icon *ngIf='sidenav.SubMenu'>{{sidenav.Estado?'arrow_drop_up':'arrow_drop_down'}}</mat-icon>
</button>
<div *ngIf='sidenav.Estado && sidenav.SubMenu'>
<div *ngFor='let submenu of sidenav.SubMenu'>
<button mat-menu-item class='sidenav-button background-
submenu' *ngIf='rol | menu:submenu.Rol' [routerLink]='submenu.Vista'>
<mat-icon>{{submenu.Icono}}</mat-icon>
<span>{{submenu.Menu}}</span>
</button>
</div>
</div>
</div>
</div>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color='primary'>
<button mat-icon-button (click)='start.toggle()'>
<mat-icon>menu</mat-icon>
</button>
<span class='example-spacer'></span>
<button mat-icon-button>
<mat-icon>search</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>bookmarks</mat-icon>
</button>
<button mat-icon-button>
 <mat-icon>message</mat-icon>
</button>
</mat-toolbar>
<div class='contenedor'>
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
En “sistema.component.ts” borrar y agregar el siguiente código:
import { Component, OnInit } from '@angular/core';

import { environment } from 'src/environments/environment';

import { Router } from '@angular/router';

import { MatDialog } from '@angular/material/dialog';
import { ConfirmComponent } from 'src/app/dialogs/confirm/confirm.component';
import { AlertaComponent } from 'src/app/dialogs/alerta/alerta.component';

@Component({
selector: 'app-sistema',
templateUrl: './sistema.component.html',
styleUrls: ['./sistema.component.css']
})
export class SistemaComponent implements OnInit {
private token=environment.token;
public roles=environment.roles;
public rol=0;
public MENU=environment.menu;
public datos='';
constructor(private router:Router,private dialog: MatDialog){
/*let Datos=localStorage.getItem(this.token);
 Datos=Datos.split('.')[0];
Datos=atob(Datos);
this.datos=JSON.parse(Datos);
this.rol=parseInt(this.datos['rol']);*/
this.datos=JSON.parse('{"nombre":"Juan Perez Gomez"}');
this.rol=0;
}
ngOnInit(): void {}
info(){
this.dialog.open(AlertaComponent,{
data: {titulo:'Tin Bolivia - tinbolivia.net',subtitulo:'Todos los Derechos Reservados',imagen:'tinbolivia.svg'}
});
}
cerrar(){
const dialogRef = this.dialog.open(ConfirmComponent,{
data: {titulo:'Salir',subtitulo:'Desea Salir del Sistema???'}
});
dialogRef.afterClosed().subscribe(result => {
if(result){
localStorage.removeItem(this.token);
this.router.navigateByUrl('/login');
}
});
}
}
 18. Agregar Imágenes

Crear la carpeta img dentro de assets y agregar las siguientes imágenes:

 19. Agregar la Directiva a sistema.module.ts (En caso de que no haya agregado)

import { SidenavDirective } from '../../directives/sidenav.directive';

declarations: [
SidenavDirective,
],
exports:[
SidenavDirective,
]