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

Build from sources

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

npm install
npm run build

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>

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 [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 [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
foo	string	bar	Lorem ipsum dolor.

Method	Parameters	Returns	Description
methodName()	None.	void	Lorem ipsum dolor.

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