How to get parameter with special characters in angular routing

Question

Here is my routes

const routes: Routes = [{ path: 'file-view/:file_name', component: FileViewComponent },];

My template

<div *ngFor="let el of mapElement['fileItems']| filter:term">
    <a href="file-view/{{el['fileName']}}">
       <p>{{el['fileName'] }} ({{el['number']}})</p>
    </a>
</div>

This is to get value of file_name

 ngOnInit(): void {
    this.fileName = this.route.snapshot.paramMap.get('file_name');
}

When I try to access a endpoint "http://localhost:4200/file-view/?CSTARTUP%20(cstartup.r87)" from template anchor tag

Here, if the file_name parameter has any special characters it fails to capture it. It works for simple string like this "cstartup.r87" But I'm trying to get something like this "?CSTARTUP (cstartup.r87)" and it fails. How can I cpature whole as a string here?

Answer 1

I found the answer by using this function to encode fileName.

encodeUriAll(value: string) {
return value.replace(/[^A-Za-z0-9]/g, c =>
  `%${c.charCodeAt(0).toString(16).toUpperCase()}`
);}

reference