Package Exports

ng2-alfresco-tag

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ng2-alfresco-tag) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Alfresco Tag Component for Angular 2

Prerequisites

Before you start using this development framework, make sure you have installed all required software and done all the necessary configuration prerequisites.

Install

Follow the 3 steps below:

Npm
```
npm install ng2-alfresco-tag --save
```

Html

Include these dependencies in your index.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">

  <!-- Load the Angular Material 2 stylesheet -->
  <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">

  <!-- Polyfill(s) for Safari (pre-10.x) -->
  <script src="node_modules/intl/dist/Intl.min.js"></script>
  <script src="node_modules/intl/locale-data/jsonp/en.js"></script>

  <!-- Polyfill(s) for older browsers -->
  <script src="node_modules/core-js/client/shim.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
  <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>

  <!-- Polyfill(s) for dialogs -->
  <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
  <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
  <style>._dialog_overlay { position: static !important; } </style>

  <!-- Modules  -->
  <script src="node_modules/zone.js/dist/zone.js"></script>
  <script src="node_modules/reflect-metadata/Reflect.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>

SystemJs

Add the following components to your systemjs.config.js file:
- ng2-translate
- alfresco-js-api
- ng2-alfresco-core
- ng2-alfresco-tag
Please refer to the following example file: systemjs.config.js .

Basic usage

In this component are present three different tags :

alfresco-tag-node-actions-list
alfresco-tag-list
alfresco-tag-node-list

alfresco-tag-node-actions-list

<alfresco-tag-node-actions-list [nodeId]="nodeId"></alfresco-tag-node-actions-list>

import { NgModule, Component, Input } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { TagModule } from 'ng2-alfresco-tag';

@Component({
    selector: 'alfresco-app-demo',
    template: `<alfresco-tag-node-actions-list [nodeId]="'74cd8a96-8a21-47e5-9b3b-a1b3e296787d'"></alfresco-tag-node-actions-list>
    `
})
class TagDemo {

    constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
        settingsService.ecmHost = 'http://localhost:8080';

        this.authService.login('admin', 'admin').subscribe(
            ticket => {
                console.log(ticket);
            },
            error => {
                console.log(error);
            });
    }
}

@NgModule({
    imports: [
        BrowserModule,
        CoreModule.forRoot(),
        TagModule
    ],
    declarations: [ TagDemo ],
    bootstrap:    [ TagDemo ]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

Options

Attribute	Options	Default	Description	Mandatory
`nodeId`	string		The identifier of a node.

Custom columns

alfresco-tag-node-list

<alfresco-tag-node-list [nodeId]="nodeId"></alfresco-tag-node-list>

import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { TagModule } from 'ng2-alfresco-tag';

@Component({
    selector: 'alfresco-app-demo',
    template: `<alfresco-tag-node-list [nodeId]="'74cd8a96-8a21-47e5-9b3b-a1b3e296787d'"></alfresco-tag-node-list>
    `
})
class TagDemo {

    constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
        settingsService.ecmHost = 'http://localhost:8080';

        this.authService.login('admin', 'admin').subscribe(
            ticket => {
                console.log(ticket);
            },
            error => {
                console.log(error);
            });
    }
}

@NgModule({
    imports: [
        BrowserModule,
        CoreModule.forRoot(),
        TagModule
    ],
    declarations: [ TagDemo ],
    bootstrap:    [ TagDemo ]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

Options

Attribute	Options	Default	Description	Mandatory
`nodeId`	string		The identifier of a node.

Custom columns

<alfresco-tag-list></alfresco-tag-list>

import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { TagModule } from 'ng2-alfresco-tag';

@Component({
    selector: 'alfresco-app-demo',
    template: `<alfresco-tag-list></alfresco-tag-list>`
})
class TagDemo {

    constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
        settingsService.ecmHost = 'http://localhost:8080';

        this.authService.login('admin', 'admin').subscribe(
            ticket => {
                console.log(ticket);
            },
            error => {
                console.log(error);
            });
    }
}

@NgModule({
    imports: [
        BrowserModule,
        CoreModule.forRoot(),
        TagModule
    ],
    declarations: [ TagDemo ],
    bootstrap:    [ TagDemo ]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

Custom columns

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

NPM scripts

Command	Description
npm run build	Build component
npm run test	Run unit tests in the console
npm run test-browser	Run unit tests in the browser
npm run coverage	Run unit tests and display code coverage report

License

Apache Version 2.0