diff --git a/ng2-components/ng2-alfresco-viewer/README.md b/ng2-components/ng2-alfresco-viewer/README.md index dfb187f706..b80011b856 100644 --- a/ng2-components/ng2-alfresco-viewer/README.md +++ b/ng2-components/ng2-alfresco-viewer/README.md @@ -48,11 +48,13 @@ Add the following dependency to your index.html: + ``` -Make sure your systemjs.config has the following configuration: +The following component needs to be added to your systemjs.config: -https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js +- 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 @@ -71,7 +73,40 @@ Also make sure you include these dependencies in your .html page: ``` -#### Basic usage +#### Basic usage with node id + +```html + +``` + +Example of an App that declares the file viewer component : + +```ts +import { Component } from '@angular/core'; +import { bootstrap } from '@angular/platform-browser-dynamic'; +import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer'; + +@Component({ + selector: 'my-app', + template: ` +
+
`, + directives: [VIEWERCOMPONENT] +}) +class MyDemoApp { + + fileNodeId: any; + + constructor() { + this.fileNodeId = '09469a81-1ed9-4caa-a5df-8362fc3d096f'; + } +} +bootstrap(MyDemoApp, [ + VIEWERCOMPONENT +]); +``` + +#### Basic usage with urlFile ```html @@ -105,11 +140,10 @@ bootstrap(MyDemoApp, [ Attribute | Options | Default | Description | Mandatory --- | --- | --- | --- | --- -`urlFile` | *string* | | Url where to load the file | mandatory -`fileName` | *string* | Parsed from `urlFile` | Name of the file to display in the title bar. If not specified will take the last part of the URL | -`overlayMode` | *boolean* | `false` | if true Show the Viewer full page over the present content | +`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 | -`mimeType` | *string* | `true` | MimeType of the file, used to detect if the browser can display the content. If not supplied the component will attempt to guess based on file extension of the `urlFile` | ## Build from sources Alternatively you can build component from sources with the following commands: diff --git a/ng2-components/ng2-alfresco-viewer/demo/src/main.ts b/ng2-components/ng2-alfresco-viewer/demo/src/main.ts index 4f6296c12d..665b3caa91 100644 --- a/ng2-components/ng2-alfresco-viewer/demo/src/main.ts +++ b/ng2-components/ng2-alfresco-viewer/demo/src/main.ts @@ -47,9 +47,9 @@ import {
+ [overlayMode]="true" + [urlFile]="'localTestFile.pdf'">
`,