CODEWITHSUNDEEP
angularfileviewer
Mahdi
Mahdi

Reputation: 416

how to show files in angular 8

I want to display the files, with different extensions in the Angular component. What modules do I use for this? I have reviewed the following modules.But each has a problem.

Upvotes: 2

Views: 11199

Answers (1)

Maryam Rajabi
Maryam Rajabi

Reputation: 49

you can use angular-file-viewer

this package support PDF, JPEG, PNG, MP4

Demo

install

npm i @taldor-ltd/angular-file-viewer ng2-pdf-viewer

Usage

Add AngularFileViewerModule to your module's imports

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AngularFileViewerModule } from '@taldor-ltd/angular-file-viewer';

import { AppComponent } from './app/app.component';

 @NgModule({
  imports: [BrowserModule, AngularFileViewerModule],
 declarations: [AppComponent],
 bootstrap: [AppComponent]
 })

 class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

And then use it in your component

(PDF sample)

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

import { FileMimeType } from '@taldor-ltd/angular-file-viewer';

@Component({
selector: 'app-root',
template: `
<tld-file-viewer [src]="src" [type]="type"></tld-file-viewer>`

})
export class AppComponent {
src = 'http://www.africau.edu/images/default/sample.pdf';
 type = FileMimeType.PDF;
}

documentation

Upvotes: 1

Related Questions