Search code examples
angularpdf-viewerngx-extended-pdf-viewer

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


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 {

}

Solution

  • I solved my problem by:

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