alfresco-ng2-components/ng2-components/ng2-alfresco-viewer

Alfresco File Viewer Component for Angular 2

Node

To correctly use this component check that on your machine is running Node version 5.0.0 or higher.

Install

npm install --save ng2-alfresco-viewer

Dependencies

Add the following dependency to your index.html:

<script src="node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
<script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>

The following component needs to be added to your systemjs.config:

• ng2-translate
• ng2-alfresco-core

Style

The style of this component is based on material design, so if you want to visualize it correctly you have to add the material design dependency to your project:

npm install --save material-design-icons material-design-lite

Also make sure you include these dependencies in your .html page:

<!-- Google Material Design Lite -->
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
<script src="node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">

Basic usage with node id

<ng2-alfresco-viewer [overlayMode]="true" [urlFile]="'filename.pdf'"></ng2-alfresco-viewer>

Example of an App that declares the file viewer component :

import { Component } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer';

@Component({
    selector: 'my-app',
    template: `   <alfresco-viewer [showViewer]="true" [overlayMode]="true" [fileNodeId]="fileNodeId">
                    <div class="mdl-spinner mdl-js-spinner is-active"></div>
                   </alfresco-viewer>`,
    directives: [VIEWERCOMPONENT]
})
class MyDemoApp {

    fileNodeId: any;
    
    constructor() {
        this.fileNodeId = '09469a81-1ed9-4caa-a5df-8362fc3d096f';    
    }
}
bootstrap(MyDemoApp, [
    VIEWERCOMPONENT
]);

Basic usage with urlFile

<ng2-alfresco-viewer [overlayMode]="true" [urlFile]="'filename.pdf'"></ng2-alfresco-viewer>

Example of an App that declares the file viewer component :

import { Component } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer';

@Component({
    selector: 'my-app',
    template: `   <alfresco-viewer [showViewer]="true" [overlayMode]="true" [urlFile]="'local_filename.pdf'">
                    <div class="mdl-spinner mdl-js-spinner is-active"></div>
                   </alfresco-viewer>`,
    directives: [VIEWERCOMPONENT]
})
class MyDemoApp {
    constructor() {
        console.log('constructor');
    }
}
bootstrap(MyDemoApp, [
    VIEWERCOMPONENT
]);

Options

Attribute	Options	Default	Description	Mandatory
fileNodeId	string		node Id of the file to load the file
urlFile	string		If you want laod an external file that not comes from the ECM you can use this Url where to load the file
overlayMode	boolean	false	if true Show the Viewer full page over the present content otherwise will fit the parent div
showViewer	boolean	true	Hide or show the viewer
showToolbar	boolean	true	Hide or show the toolbars

Supported file formats

Type	extensions
Media	Mp4, WebM, Ogv
Images	png, jpg, jpeg, gif, bmp
Text	pdf

Build from sources

Alternatively you can build component from sources with the following commands:

npm install
npm run build

##Build the files and keep watching for changes

```sh
$ npm run build:w
```

Running unit tests

npm test

Running unit tests in browser

npm test-browser

This task rebuilds all the code, runs tslint, license checks and other quality check tools before performing unit testing.

Code coverage

npm run coverage

Demo

If you want have a demo of how the component works, please check the demo folder :

cd demo
npm install
npm start

History

For detailed changelog, check Releases.

Contributors

Contributors