Angular, solución a problemas comunes

Esconder el header del mat-stepper de Angular Material

En caso de que necesitemos ocultar la cabecera donde se muestran los pasos del stepper que nos ofrece angular material debemos aplicar la siguiente regla css:

:host ::ng-deep .mat-horizontal-stepper-header-container { display: none; } *esconder header de angular material*

Obtener lenguaje que tiene configurado el usuario

En caso de que necesitemos obtener dinámicamente el lenguaje que tiene el usuario para así poder mostrar el sitio en el idioma solicitado, podemos aplicar la siguiente función:

const obtenerLenguajeNavegador = () => { return window.navigator.languages ? window.navigator.languages[0] : null;
    lang = lang || window.navigator.language || window.navigator.browserLanguage || window.navigator.userLanguage; }

Detectar si la aplicación tiene acceso a internet

Para poder realizar este ejercicio se debe utilizar el evento 'online' y 'offline' del objeto global window. Además se aprovecha las bondades que ofrece la programación reactiva con RXJS para poder elaborar un observable al cual nos vamos a poder subscribir y así enterarnos cuando el evento se ejecute. Por lo cual vamos a crear un servicio de Angular llamado 'network.service.ts"

import { Injectable } from '@angular/core';
//Importamos los operadores y funciones de RXJS
import { Observable, fromEvent, merge, of } from 'rxjs';
import { mapTo, share } from 'rxjs/operators';

@Injectable({
    providedIn: 'root'
})
export class NetworkService {

//Se crea un observable que sera de tipo booleano
statusNetwork$: Observable<boolean>;

constructor() {
  //En el constructor de la clase inicializamos la 
//asignación del evento al observable que creamos anteriormente.
//Por lo cual hacemos uso del operador 'fromEvent' 
//para estar pendientes de la ejecución del evento 'offline' y 'online' 
//y de acuerdo a eso devolver un valor de 'True' o 'False'

  this.statusNetwork$ = merge(
    of(navigator.onLine),
    fromEvent(window, 'online').pipe(mapTo(true)),
    fromEvent(window, 'offline').pipe(mapTo(false))
  )

  }

isOnline(): Observable<boolean>{
    //Se utiliza el operador 'share' para que todos los
   //que se subscriban a este observable obtengan el mismo valor
    return this.statusNetwork$.pipe(share());
}

}

Una vez creado el servicio solo debemos llamarlo en alguno o varios de los componentes donde lo necesitemos, por ejemplo:

import { Component, OnInit } from '@angular/core';
import { NetworkService } from 'src/app/services/network.service';

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

    isConnected = false;

    constructor(
        private networkService: NetworkService,
    ) {
    }
    ngOnInit(): void {
        this.networkService.isOnline().subscribe(online => this.isConnected = online);
    }

}

y en el HTML mostramos un mensaje dependiendo si tenemos conexión a internet o no.

<div class="alert alert-success" *ngIf="isConnected">
Usted cuenta con una conexión a internet activa
</div>
<div class="alert alert-danger" *ngIf="!isConnected">
No existe disponibilidad de acceso a internet, por favor revise su conexión
</div>