Angular error with String Replace function using interpolation in HTML

Question

In my Angular application, I am trying to display file name from complete file path.

<ng-template kendoGridCellTemplate let-dataItem="dataItem">            
        <a style="text-decoration: underline !Important;" href="javascript:void(0)" (click)="downloadFile(dataItem)">{{dataItem.file.replace(/^.*[\\\/]/, '')}}</a>
</ng-template>

dataItem.file.replace(/^.*[\\\/]/, '') works when I use in component class but fails in html with interpolation.

I get error as:

Parser Error: Unexpected token / at column 35 in [{{dataItem.file.replace(/^.*[\\\], '')}}] in ng:///AppModule/MyComponent.html@24:130 ("-decoration: underline !Important;" href="javascript:void(0)" (click)="downloadFile(dataItem)">[ERROR ->]{{dataItem.file.replace(/^.*[\\\], '')}}</a>

Is there anything wrong with this line in the interpolation ? Any pointers ?

{{dataItem.file.replace(/^.*[\\\/]/, '')}}

Martin Parenteau · Accepted Answer · 2019-02-26 20:27:41Z

1

In the following interpolation, you are creating a RegExp object, which is not allowed in that context:

{{ dataItem.file.replace(/^.*[\\\/]/, '') }}

You can wrap the call in a method of the component:

formatPath(path: string): string {
  return path.replace(/^.*[\\\/]/, '');
}

and call the method in the template:

{{ formatPath(dataItem.file) }}

edited Feb 26, 2019 at 20:27

answered Feb 26, 2019 at 20:25

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ProgSky Over a year ago

This is Great. Thanks @ConnorsFan

Collectives™ on Stack Overflow

Angular error with String Replace function using interpolation in HTML

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related