@appcarvers/ngx-unitelist/unitelist/unitelist.component.html

This library is for Angular (2+) projects to build a list from passed data and provide pagination and filters and their callbacks after proper configuration.

<div>
    <ngx-unite-pagination
      [totalPages]  = 'totalPages'
      [currentPage] = 'currentPage'
      (pageChanged) = 'checkPageChanged($event)'
    ></ngx-unite-pagination>

    <div *ngIf="_filters.length || searchBox" [class]="filterCoverClass">

      <div *ngIf="searchBox" [class]="searchBoxClass">
        <div [class]="showSearchButtons ? 'input-group' : ''">
          <input class="form-control" type="text" placeholder="Search" [(ngModel)]="searchVal" (keyup)="searchValueChanged($event)"  (keyup.enter)="searchButtonClicked($event)" (keyup.backspace)="searchButtonClicked($event)">

          <ng-container *ngIf="showSearchButtons">
              <span class="input-group-btn custom-search-cancle" *ngIf="searchVal" (click)="searchCancle()">
                <button class="btn btn-default" type="button">
                  <i class="glyphicon glyphicon-remove"></i>
                </button>
              </span>
              <span class="input-group-btn" (click)="searchButtonClicked()">
                <button class="btn btn-default" type="button">
                    <i class="glyphicon glyphicon-search"></i>
                </button>
              </span>
          </ng-container>
        </div>
      </div>

      <div *ngFor='let thisFilter of _filters; let i=index' [class]="filterBlockClass">
        <ng-container [ngSwitch]="thisFilter.type">

          <ng-container *ngSwitchCase="'date'">
            <div class="">
              <input type="text" class="form-control" bsDatepicker [placeholder]="thisFilter.label" (bsValueChange)="dateChanged($event, thisFilter.name, i)" [bsValue]="thisFilter.value" value="{{ thisFilter.value | date:'MM/dd/yyyy' }}">
              <span class="cancel-span" *ngIf="myFilterObj.values[thisFilter.name]" (click)="clearDate(thisFilter.name, i)">
                <button class="btn btn-link date-clear" type="button">
                      <i class="glyphicon glyphicon-remove "></i>
                </button>
              </span>
            </div>
          </ng-container>

          <ng-container *ngSwitchDefault>
            <ng-select
                placeholder = "{{thisFilter.label}}"
                [allowClear]="true"
                [items]="thisFilter.options"
                [active]="thisFilter.value"
                (selected)="filterSelected($event, thisFilter.name, i)"
                (removed) ="filterRemoved($event, thisFilter.name, i)"
                >
            </ng-select>

          </ng-container>

        </ng-container>
      </div>

      <div class="clear"></div>
    </div>

    <div *ngIf="displayTable">
        <table [class]="tableBlockClass">
          <thead>
            <tr>
              <th *ngFor="let headTitle of tableHeaders">{{headTitle.label}}</th>
            </tr>
          </thead>
          <tbody #tableBody>
            <tr *ngFor="let tData of tableData">
              <td *ngFor="let colIdentifier of tableHeaders" [innerHTML]= "tData | displayDataTableRow : colIdentifier">John</td>
            </tr>
          </tbody>
        </table>
    </div>

</div>