alfresco-ng2-components/demo-shell/src/app/components/task-list-demo/task-list-demo.component.html

<div class="task-list-demo-inputs">

     <form [formGroup]="taskListForm">
        <mat-form-field>
            <mat-label>App Id</mat-label>
                <input 
                matInput
                class="form-control"
                [formControl]="taskAppId">
                <mat-error *ngIf="taskAppId.hasError('pattern')">
                    {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.APP_ID_TYPE_ERROR' | translate }}
                </mat-error>
        </mat-form-field>
        
        <mat-form-field>
            <mat-label>Task Name</mat-label>
            <input 
            matInput
            class="form-control"
            [formControl]="taskName">
        </mat-form-field>

        <mat-form-field>
            <mat-label>Task Id</mat-label>
            <input 
            matInput 
            class="form-control"
            [formControl]="taskId">
        </mat-form-field>

        <mat-form-field>
            <mat-label>Start</mat-label>
            <input 
            matInput 
            class="form-control"
            matTooltip="{{ 'TASK_LIST_DEMO.TOOLTIP_MESSAGE.START_INPUT' | translate }}"
            [formControl]="taskStart">
            <mat-error *ngIf="taskStart.hasError('pattern')">
                {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.NUMBER_TYPE_ERROR' | translate }}
            </mat-error>
        </mat-form-field>

        <mat-form-field>
            <mat-label>ProcessDefinitionId</mat-label>
            <input 
            matInput
            class="form-control"
            [formControl]="taskProcessDefinitionId">
            <mat-hint>E.g. SimpleProcess:1:2</mat-hint>
        </mat-form-field>

        <mat-form-field>
            <mat-label>ProcessInstanceId</mat-label>
            <input 
            matInput 
            class="form-control"
            [formControl]="taskProcessInstanceId">
            <mat-hint>E.g. 12345</mat-hint>
        </mat-form-field>

        <mat-form-field>
            <mat-label>Items per page</mat-label>
            <input
            matInput
            class="form-control"
            [formControl]="taskSize">
        </mat-form-field>

        <mat-form-field>
            <mat-label>Page</mat-label>
            <input 
            matInput 
            class="form-control"
            [formControl]="taskPage">
        </mat-form-field>

        <mat-form-field>
                <mat-label>Process Instance</mat-label>
                <mat-select 
                class="form-control"
                [formControl]="taskIncludeProcessInstance">
                 <mat-option *ngFor="let includeProcessInstanceOption of includeProcessInstanceOptions" [value]="includeProcessInstanceOption.value">{{ includeProcessInstanceOption.title }}</mat-option>
                </mat-select>
        </mat-form-field>

        <mat-form-field>
                <mat-label>Assignment</mat-label>
                <mat-select 
                class="form-control"
                [formControl]="taskAssignment">
                 <mat-option *ngFor="let assignmentOption of assignmentOptions" [value]="assignmentOption.value">{{ assignmentOption.title }}</mat-option>
                </mat-select>
        </mat-form-field>

        <mat-form-field>
                <mat-label>State</mat-label>
                <mat-select 
                class="form-control"
                [formControl]="taskState">
                    <mat-option *ngFor="let stateOption of stateOptions" [value]="stateOption.value">{{ stateOption.title }}</mat-option>
                </mat-select>
        </mat-form-field>

        <mat-form-field>
                <mat-label>Sort</mat-label>
                <mat-select 
                class="form-control"
                [formControl]="taskSort">
                    <mat-option *ngFor="let sortOption of sortOptions" [value]="sortOption.value">{{ sortOption.title }}</mat-option>
                </mat-select>
        </mat-form-field>
    </form>
</div>
<div class="adf-reset-button">
    <button mat-raised-button (click)="resetTaskForm()">Reset</button>
</div>

<div>
    <adf-tasklist
        [appId]="appId"
        [taskId]="id"
        [name]="name"
        [processDefinitionId]="processDefinitionId"
        [processInstanceId]="processInstanceId"
        [assignment]="assignment"
        [state]="state"
        [sort]="sort"
        [start]="start"
        [page]="page"
        [size]="size"
        [includeProcessInstance]="includeProcessInstance"
        #taskList>
        <data-columns>
                <data-column key="id" title="Id"></data-column>
                <data-column key="name" title="Name"></data-column>
                <data-column key="description" title="Description"></data-column>
                <data-column key="created" title="Created"></data-column>
                <data-column key="dueDate" title="Due Date"></data-column>
                <data-column key="processInstanceId" title="Process Instance Id"></data-column>
                <data-column key="processDefinitionId" title="Process Definition Id"></data-column>
            </data-columns>
    </adf-tasklist>
    
    <adf-pagination
        [target]="taskList">
    </adf-pagination>
</div>