¿Como crear en Angular 11 un servicio que compare la cadena "Camión" con tilde y que sea igual a la cadena "Camión" sin tilde?

Introducción: 

En el presente artículo se va a realizar un ejemplo de un servicio en Angular 11 que permita comprar dos cadenas que comparen palabras como "Camión" y que pueda identificar que son iguales sin importar las mayusculas, minusculas, tildes y espacios en blanco.

 Entorno: 

Se realiza sobre una maquina MacBook Pro 10 con el editor de código Visual Studio Code, usando Angular 11.

Paso 1: 

Crea un nuevo servicio en Angular utilizando el comando ng generate service <nombre-servicio> en la terminal o consola de comandos. Por ejemplo: ng generate service ComparadorCadenas.

Paso 2: 

Abre el archivo del servicio recién creado, que se encuentra en src/app/nombre-servicio.service.ts, y agrega la siguiente función:

compararCadenas(cadena1: string, cadena2: string): boolean { // Convertir ambas cadenas a minúsculas y reemplazar varios espacios por uno solo const cadena1Limpia = cadena1.toLowerCase().replace(/\s+/g, ' '); const cadena2Limpia = cadena2.toLowerCase().replace(/\s+/g, ' '); // Remover acentos de ambas cadenas const cadena1SinAcentos = cadena1Limpia.normalize("NFD").replace(/[\u0300-\u036f]/g, ""); const cadena2SinAcentos = cadena2Limpia.normalize("NFD").replace(/[\u0300-\u036f]/g, ""); // Comparar las dos cadenas sin acentos return cadena1SinAcentos === cadena2SinAcentos; }

La función compararCadenas utiliza el método toLowerCase() de JavaScript para convertir ambas cadenas a minúsculas y la expresión regular /s+/g para reemplazar varios espacios en blanco por uno solo. Ahora utiliza la función normalize de JavaScript para descomponer los caracteres acentuados en su forma canónica y la expresión regular /[\u0300-\u036f]/g para eliminar los diacríticos de ambas cadenas.

Paso 3: 

Ahora puedes utilizar el servicio en cualquier componente de Angular importándolo y declarándolo como una dependencia en el constructor:

typescript
import { Component } from '@angular/core'; 
import { ComparadorCadenasService } from './comparador-cadenas.service';



@Component({
  
    selector: 'app-mi-componente', 
    template: `
    <div *ngIf="comparadorCadenasService.compararCadenas('Camión uno', 'camion    uno')">Las cadenas son iguales</div>
  `,

})

export class MiComponente {

  

    constructor(private comparadorCadenasService: ComparadorCadenasService) { }


}

En este ejemplo, la plantilla del componente utiliza la función compararCadenas del servicio para comparar las cadenas "Camión uno" y "camion uno", y mostrar un mensaje si son iguales. La cadena "Camión uno" tiene espacios en blanco adicionales en comparación con "camion uno", pero la función compararCadenas los convierte a un solo espacio en blanco y los ignora en la comparación.

Paso 4: 

Recuerda importar el servicio en el módulo de Angular que lo vayas a utilizar, agregando la siguiente línea en el archivo src/app/app.module.ts:

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

import { BrowserModule } from '@angular/platform-browser';


import { AppComponent } from './app.component';

import { ComparadorCadenasService } from './comparador-cadenas.service';



@NgModule({
  
    declarations: [
    AppComponent
  ],
  
    imports: [
    BrowserModule
  ],
  
    providers: [
    ComparadorCadenasService
  ],
  
    bootstrap: [AppComponent]

})

export class AppModule { }

Con estos pasos, has creado un servicio en Angular 11 que compara la cadena "Camión" con tilde y que es igual a la cadena "Camión" sin tilde. Puedes utilizar esta función para comparar cualquier otra cadena con o sin acentos diacríticos.