¿Cómo filtrar el nombre de archivo basado en caracteres especiales en la página html en angular?

Suena como un caso de uso perfecto para una tubería personalizada.

Puede crear una tubería personalizada como esta:

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

@Pipe({
  name: 'nameWithoutHash'
})
export class NameWithoutHashPipe implements PipeTransform {

  transform(fullName: any, args?: any): any {
    return fullName.split('|')[1];
  }

}

Entonces podría usarlo así:

<mat-list role="list">
  <mat-list-item role="listitem" *ngFor="let item of uploadedFiles">
    <div class="list-files">
      <span>{{item | nameWithoutHash}}</span>
      <div class="btn-custom" (click)="delete(item)"> Delete</div>
    </div>
  </mat-list-item>
</mat-list>

Aquí hay un demostración de código de muestra en funcionamiento para su ref.