<alfresco-document-list
    #list
    [thumbnails]="thumbnails"
    [breadcrumb]="breadcrumb"
    [navigate]="navigation"
    [downloads]="downloads"
    (itemClick)="onItemClick($event)">
</alfresco-document-list>

Example of the component that declares document list and provides values for bindings:

import {Component} from 'angular2/core';
import {
    DOCUMENT_LIST_DIRECTIVES,
    DOCUMENT_LIST_PROVIDERS
} from 'ng2-alfresco-documentlist/ng2-alfresco-documentlist';

@Component({
    selector: 'my-view',
    template: '<YOUR TEMPLATE>',
    directives: [DOCUMENT_LIST_DIRECTIVES],
    providers: [DOCUMENT_LIST_PROVIDERS]
})
export class MyView {
    thumbnails: boolean = true;
    breadcrumb: boolean = false;
    navigation: boolean = true;
    downloads: boolean = true;

    events: any[] = [];

    onItemClick($event) {
        console.log($event.value);
        this.events.push({
            name: 'Item Clicked',
            value: $event.value
        });
    }
}

Note the use of DOCUMENT_LIST_DIRECTIVES barrel that consolidates all the document list related directives together. It gives you access to <document-actions>, <folder-actions> and many other directives. In addition DOCUMENT_LIST_PROVIDERS exports all primary services and providers needed for component to function.

Custom folder icon

Document list element exposes folder-icon property that accepts a CSS class list value with folder_open by default.

You can provide any list of classes in order to customize look and feel of the icon. Example below shows the use of Font Awesome icon instead of the default one:

<alfresco-document-list folder-icon="folder_special" ...>
</alfresco-document-list>

Actions

Document List supports declarative actions for Documents and Folders. Each action can be bound to either default out-of-box handler or a custom behavior. You can define both folder and document actions at the same time.

Document actions

<alfresco-document-list ...>
    <document-actions>
        <document-action title="System action" handler="system2"></document-action>
        <document-action title="Custom action" (execute)="myCustomAction1($event)"></document-action>
    </document-actions>
</alfresco-document-list>

export class MyView {
    // ...

    myCustomAction1(event) {
        alert('Custom document action for ' + event.value.displayName);
    }
}

All document actions are rendered as a dropdown menu as on the picture below:

Quick document actions

It is also possible to display most frequent actions within a separate <quick-documents> buttons panel:

<alfresco-document-list ...>
    <quick-document-actions>
        <quick-document-action icon="extension" handler="system1"></quick-document-action>
        <quick-document-action icon="thumb_up" handler="system2"></quick-document-action>
    </quick-document-actions>
</alfresco-document-list>

Quick actions provide same support for system and custom handlers. In addition it is possible setting button icon (css class list), text of the label or both.

Folder actions

<alfresco-document-list ...>
    <folder-actions>
        <folder-action title="Default folder action 1" handler="system1"></folder-action>
        <folder-action title="Custom folder action" (execute)="myFolderAction1($event)"></folder-action>
    </folder-actions>
</alfresco-document-list>

export class MyView {
    // ...

    myFolderAction1(event) {
        alert('Custom folder action for ' + event.value.displayName);
    }
}

Quick folder actions

Quick folder actions have the same behavior as quick document actions. You can use custom or system handler, provide icon and title. Every folder action is rendered as a separate button.

<alfresco-document-list ...>
    <quick-folder-actions>
        <quick-folder-action icon="delete" title="Delete" handler="system1"></quick-folder-action>
    </quick-folder-actions>
</alfresco-document-list>

Using all actions at the same time

<alfresco-document-list #list
    [thumbnails]="thumbnails"
    [breadcrumb]="breadcrumb"
    [navigate]="navigation"
    [downloads]="downloads"
    (itemClick)="onItemClick($event)">
    <quick-folder-actions>
        <quick-folder-action title="Delete" handler="system1"></quick-folder-action>
    </quick-folder-actions>
    <folder-actions>
        <folder-action title="Default folder action 1" handler="system1"></folder-action>
        <folder-action title="Custom folder action" (execute)="myFolderAction1($event)"></folder-action>
    </folder-actions>
    <quick-document-actions>
        <quick-document-action icon="glyphicon glyphicon-pushpin" handler="system1"></quick-document-action>
    </quick-document-actions>
    <document-actions>
        <document-action title="System action" handler="system2"></document-action>
        <document-action title="Custom action" (execute)="myCustomAction1($event)"></document-action>
    </document-actions>
</alfresco-document-list>

Advanced usage and customization

Customizing default actions

TBD