Can't bind to 'src' since it isn't a known property of 'ngx-extended-pdf-viewer' Angular8+

Question

I am currently working with ngx-extended-pdf-viewer with Angular8+ to render a PDF, it doesn't work. And I keep getting the runtime error "Can't bind to 'src' since it isn't a known property of 'pdf-viewer'".

Does anyone know why this is?

Here is my HTML:

            <div class="row">
                <div class="col-md-12">
                    <div class="card-body">
                        <ngx-extended-pdf-viewer 
                            [src]="pdfSrc" 
                            [useBrowserLocale]="true" 
                            [textLayer]="true"
                            [showHandToolButton]="true"
                            [height]="'100vh'">
                        </ngx-extended-pdf-viewer>

                    </div>
                </div>
            </div>

my app.module.ts

...
import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';

@NgModule({
  imports: [
    NgxExtendedPdfViewerModule,
    ....

  ],
  declarations: [
    AppComponent,
    ...


  ],
  providers: [
   ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here is my .ts

import { Component, OnInit } from '@angular/core';
import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';


    @Component({
      selector: 'app-video-reader',
      templateUrl: './video-reader.component.html',
      styleUrls: ['./video-reader.component.css'],
      providers: [NgxExtendedPdfViewerModule]

    })
    export class VideoReaderComponent implements OnInit {

      pdfSrc = "assets/example.pdf";  /* PDF*/


      constructor() { }

      ...

      ngOnInit(): void {
        this.video = 'jYvkMv7LzCw';
        this.init();
      }

     ...

    }

my app.component.ts

import { Component} from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

}

You need to add the `NgxExtendedPdfViewerModule` to the imports of every module where you are using the `ngx-extended-pdf-viewer`. Are the HTML and .ts files in a component, that is declared in the AppModule? — Garuno, Apr 16 '20 at 13:48
I even added to my .ts : `import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer'; @Component({ ... providers: [NgxExtendedPdfViewerModule] })` — tesnim, Apr 16 '20 at 13:54
Please post the whole `app.component.html` / `video-reader.component.html`. If you keep on posting breadcrumbs nobody will be able to help you. — acincognito, Apr 16 '20 at 15:34

score 1 · Accepted Answer · edited Oct 10 '20 at 15:54

1

I solved my problem by:

> npm update 
> npm install
> npm audit fix --force

edited Oct 10 '20 at 15:54

Adrian Mole

49,934
160
51
83

answered Apr 18 '20 at 02:01

tesnim

133
1
2
8

score 0 · Answer 2 · answered Apr 15 '20 at 18:56

0

Try [(src)]="pdfSrc"

It's a two-way binding attribute.

answered Apr 15 '20 at 18:56

Jiharz

9
1

Thanks, but same problem! – tesnim Apr 16 '20 at 12:32
this is different to what the documentation says. Also, doesn't solve the issue. – hikizume Aug 06 '21 at 10:36
This doesn't work. – aug70co Jul 13 '22 at 18:42

vishal · Answer 3 · 2023-02-13T10:44:52.500

-1

Use src="pdfSrc"

It's works

edited Feb 13 '23 at 10:44

answered Feb 13 '23 at 10:18

vishal

1
1

1

Welcome to StackOverflow and thanks for your contribution! Unfortunately, the OP is asking for "binding" and this will not achieve that. Please consider modifying this answer. – Ryan Naccarato Feb 17 '23 at 22:07
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 23 '23 at 17:01

Can't bind to 'src' since it isn't a known property of 'ngx-extended-pdf-viewer' Angular8+

3 Answers3