Glad to share that I successfully resolved the issue by conducting some tests.
I opted to develop a function that utilizes regular expressions to retrieve the desired value.
Below is the outcome:
TS
public games = ['The Legend of Zelda', 'Pokémon', 'Chrono Trigger']
public gamesCopy = this.games
public search: string = ''
private slug(val) {
val = val.replace(/[áàãâä]/g, 'a')
val = val.replace(/[ÁÀÃÂÄ]/g, 'a')
val = val.replace(/[éèêë]/g, 'e')
val = val.replace(/[ÉÈÊË]/g, 'e')
val = val.replace(/[íìîï]/g, 'i')
val = val.replace(/[ÍÌÎÏ]/g, 'i')
val = val.replace(/[óòõôö]/g, 'o')
val = val.replace(/[ÓÒÕÔÖ]/g, 'o')
val = val.replace(/[úùûü]/g, 'u')
val = val.replace(/[ÚÙÛÜ]/g, 'u')
val = val.replace(/[ç]/g, 'c')
val = val.replace(/[Ç]/g, 'c')
return val.toLowerCase()
}
public searching(search: string) {
this.gamesCopy = this.games.filter(res => this.slug(res).indexOf(this.slug(search)) > -1)
}
HTML
<input type="text" [(ngModel)]="search" (ngModelChange)="searching($event)">
<ul>
<li *ngFor="let game of gamesCopy">{{game}}</li>
</ul>
I eliminated the usage of ng-pipes.
That wraps it up :)