Angular 6+ binding [src] in ngx-extended-pdf-viewer

Question

I'm using ngx-extended-pdf-viewer ( npm ) to render a PDF and it works when i set directly the path+fileName, as below:

 <ngx-extended-pdf-viewer [src]="'assets/example.pdf'" 
            [showPrintButton]="false" [showBookmarkButton]="false"
            [showOpenFileButton]="false" 
            [showSidebarOnLoad]="false"
            [showSidebarButton]="true" 
            delayFirstView="6000" useBrowserLocale="false">
          </ngx-extended-pdf-viewer>

I'd like to create a variable in .TS and binding it in [src] like below:

Typescript

...
ngOnInit() {
    this.filePathAndName = "'assets/example.pdf'";
...

HTML

 <ngx-extended-pdf-viewer [src]="{{filePathAndName}}" 
            [showPrintButton]="false" [showBookmarkButton]="false"
            [showOpenFileButton]="false" 
            [showSidebarOnLoad]="false"
            [showSidebarButton]="true" 
            delayFirstView="6000" useBrowserLocale="false">
          </ngx-extended-pdf-viewer>

But It doesn't work.

The major problem is the [src] needs to have the two symbols: Quotation marks ( " ) following by Apostrophe ( ' ) ... " ' path+name ' " (without the spaces)

My question is : How can I put a valid value in a variable in Typescript to render properly in HTML in this specific scenario ?

Answer 1

It doesn't need those quotation marks. Those are only for literal string bindings. Try this:

this.filePathAndName = "assets/example.pdf";

<ngx-extended-pdf-viewer *ngIf="filePathAndName" [src]="filePathAndName"