File Viewer for Angular

• PDF
• JPEG
• PNG
• MP4

Demo

https://taldor-ltd.github.io/angular-file-viewer/

Overview

• Install
• Usage
• Options
• Unsupported file types

Install

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

Note: ng2-pdf-viewer is a dependency we're using to display PDF files.

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;
}

Options

Property	Type	Required	Default
[src]	string, UInt8Array	Required	-
[type]	FileMimeType	Required	-
[pdfZoom]	number	Optional	1

[src] - string, UInt8Array

String

• pdf location as url

[src]="'https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf'"

• pdf location as local file location

[src]="'assets/pdf/pdf-test.pdf'"

UInt8Array

• data url as UInt8Array

[src]="'data:application/stream;base64,Hello%2C%20World!'"

[type] - FileMimeType

FileMimeType is an enum exported from this package. It's values are:

• PDF = 'application/pdf'
• JPEG = 'image/jpeg'
• PNG = 'image/png'
• MP4 = 'video/mp4'

use it lis this:

type = FileMimeType.PDF

[pdfZoom] - number

Change this property value to zoom in and out in pdf files. Default value is 1.

[pdfZoom]="1"

Unsupported file types

An unsupported file type will display a default message: File type is not supported

To override this message with any other content, just add a content to tld-file-viewer tag:

<tld-file-viewer [src]="src" [type]="type">
  <h1 style="margin:auto;">some message</h1>
</tld-file-viewer>

NOTE: You have a file type you wish to display that this repository is not supporting yet, open it as an issue tagged with enhancement and we'll try to add it as fast as we can. If you need it asap, you can ask for a PR, we'll check it, and once it's verified we'll happily merge it.