Configuraciones adicionales ANGULAR

 CORRECTA FORMA DE INSERTAR IMÁGENES EN HTML ANGULAR

En el código html las referencias a imágenes se deben agregar de la siguiente manera:

./assets/images/icons/perficon.png

<img class="img-responsive" src="./assets/images/icons/perficon.png">

 

CONFIGURACION DE ENVIRONMENT

Para manejar variables de entorno cambiantes para entorno de desarrollo y producción realiza las configuraciones en los siguientes archivos:

* El archivo environment.ts es reemplazado por el environment.prod.ts en el momento de compilación al ejecutar “ng build –prod –aot”

Archivo environment.ts

 

export const environment = {

  production: false,

  

  backendUrl: 'http://localhost:8080/siserp-pos-backend',

};

 

Archivo environment.prod.ts

export const environment = {

  production: true,

  

  backendUrl: 'http://192.168.43.214:8080/siserp-pos-backend',

};

COMPONENTE LOADING PARA ANGULAR 

 

$ npm install --save  ng4-loading-spinner

1. Importa el modulo en el app.module.ts

import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';

 

@NgModule({

  declarations: [

    AppComponent,

    IntranetComponent,

    SesionComponent,

  ],

  imports: [

    BrowserModule,

    BrowserAnimationsModule,

    AppRoutingModule,

    Ng4LoadingSpinnerModule. forRoot(),//FOR LOADING

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

2. Agregar la etiqueta en el componente(.ts) deseado

<navbar [showSubmenu2]="true">

  <div class="page">

<ng4-loading-spinner [timeout]="300000" [loadingText]="'Cargando...'">

</ng4-loading-spinner>

 

3.Importa el componente

import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';

...

...

  constructor(private fb: FormBuilder,

    public dialog: MatDialog,

    private spinnerService: Ng4LoadingSpinnerService, //AGREGAR PARA LOADING

    @Inject(MaestraService) private maestraService: MaestraService,

    private datePipe: DatePipe) { }

 

 

4.Finalmente usar las siguientes para mostrar y ocultar el spinner loading

this.spinnerService.show();

this.spinnerService.hide();

 

 

CREAR SERVICE

$ ng g s modules/services/generic –spec=false

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

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

import { ApiOutResponse } from '../dto/response/api-out.response';

import { Observable } from 'rxjs';

import { MaestraRequest } from '../dto/request/maestra.request';

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

 

@Injectable({

  providedIn: 'root'

})

export class GenericService {

 

  constructor(private http: HttpClient) { }

 

  public listarMaestra(request: MaestraRequest): Observable<ApiOutResponse> {

    return this.http.post<ApiOutResponse>(`${environment.backendUrl}egreso/lista`, request);

  }

}

 

 

 

Llamar a un servicio desde componente.ts

listarMaestra(): void {

    this.dataSource = null;

    this.isLoading = true;

 

    let maestra = new MaestraRequest();

    maestra.idMaestra = 0;

    this.genericService.listarMaestra(maestra).subscribe(

      (data: ApiOutResponse) => {

        this.listaMaestraResponse = data.objeto;

        this.cargarDatosTabla();

        this.isLoading = false;

      },

      error => {

        console.error('Error al consultar datos');

        this.isLoading = false;

      }

    );

  }

 

 

 

 

CONFIGURAR MODULO ICONO

$ ng g m modules/icon –flat

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

import { CommonModule } from '@angular/common';

import { MaterialModule } from './material.module';

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

import { MatIconRegistry } from '@angular/material';

 

@NgModule({

  declarations: [],

  imports: [],

  providers: [

    MatIconRegistry

  ]

})

export class IconModule {

  private path: string = '../../assets/images/svg-icons';

 

  constructor(private domSanitizer: DomSanitizer, public matIconRegistry: MatIconRegistry) {

    this.matIconRegistry

      .addSvgIcon('excel', this.setIconPath(`${this.path}//icons8-microsoft-excel.svg`));

  }

 

  private setIconPath(url: string): SafeResourceUrl {

    return this.domSanitizer.bypassSecurityTrustResourceUrl(url);

  }

}