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

Alfresco File Viewer Component for Angular 2

Install

npm set registry http://devproducts.alfresco.me:4873
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>

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">

Make sure your systemjs.config has the following configuration:

    System.config({
                defaultJSExtensions: true,
                map: {
                    'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer',
                    'rxjs': 'node_modules/rxjs',
                    'angular2': 'node_modules/angular2',
                    'app': 'dist/main'
                },
                packages: {
                    'src': {
                        defaultExtension: 'js'
                    },
                    'ng2-alfresco-viewer': {
                        defaultExtension: 'js'
                    },
                    'rxjs': {
                        defaultExtension: 'js'
                    },
                    'angular2': {
                        defaultExtension: 'js'
                    }
                }
            });

Basic usage

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

Example of an App that declares the file viewer component :

import { Component } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer/dist/ng2-alfresco-viewer';

@Component({
    selector: 'my-app',
    template: `   <alfresco-viewer [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 --- | --- | --- | --- urlFile | string | | Url where to load the file | mandatory overlayMode | boolean | false | if true Show the Viewer full page over the present content |

Build from sources

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

npm install
npm run build

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