toolbar.html

<div class="container-fluid">
    <div class="row toolbar-pf">
        <div class="col-sm-12">
            <div class="toolbar-pf-actions">
                <div *ngIf="filterProps" class="form-group toolbar-pf-filter">
                    <label class="sr-only" for="filter">{{filterBy.label}}</label>
                    <div class="input-group">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{filterBy.label}} <span class="caret"></span></button>
                            <ul class="dropdown-menu">
                                <li *ngFor="let prop of filterProps" (click)="changeFilterByProp(prop)" class="{{selectedFilterClass(prop)}}"><a>{{prop.label}}</a></li>
                            </ul>
                        </div><!-- /btn-group -->
                        <form #filterForm="ngForm">
                            <input [(ngModel)]="filterText" name="filterText"  type="text" class="form-control" id="filter" placeholder="Filter By {{filterBy.label}}...">
                        </form>
                    </div><!-- /input-group -->
                </div>
                <div *ngIf="sortProps" class="form-group">
                    <div class="dropdown btn-group">
                        <button type="button" 
                                class="btn btn-default dropdown-toggle" 
                                data-toggle="tooltip"
                                data-toggle="dropdown"
                                data-placement="top"
                                title="{{sortByTooltip}}"
                                aria-haspopup="true" 
                                aria-expanded="false">{{sortBy.label}} <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li *ngFor="let prop of sortProps" (click)="changeSortByProp(prop)" class="{{selectedSortByClass(prop)}}"><a>{{prop.label}}</a></li>
                        </ul>
                    </div>
                    <button (click)="toggleSort()" class="btn btn-link" type="button">
                        <span *ngIf="!isSortAscending" 
                              class="fa fa-sort-alpha-asc" 
                              data-toggle="toltip" 
                              data-placement="top" 
                              title="{{sortAscendingTooltip}}"></span>
                        <span *ngIf="isSortAscending" 
                              class="fa fa-sort-alpha-desc"
                              data-toggle="toltip" 
                              data-placement="top" 
                              title="{{sortDescendingTooltip}}"></span>
                    </button>
                </div>
                <div *ngIf="actionButtons">
                    <span class="form-group" *ngFor="let action of actionButtons">
                        <button *ngIf="!isIconButton(action)" 
                                (click)="action.performAction()" 
                                data-toggle="tooltip" 
                                data-placement="top" 
                                title="{{action.tooltip}}" 
                                class="btn btn-default" 
                                type="button">{{action.label}}</button>
                        <button *ngIf="isIconButton(action)" 
                                (click)="action.performAction()" 
                                data-toggle="tooltip" 
                                data-placement="top" 
                                title="{{action.tooltip}}" 
                                class="btn btn-link" 
                                type="button">
                            <span class="{{action.label.getClasses()}}"></span>
                        </button>
                    </span>
                    <!--<button class="btn btn-default" type="button">Action</button>
                    <div class="dropdown btn-group  dropdown-kebab-pf">
                        <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            <span class="fa fa-ellipsis-v"></span>
                        </button>
                        <ul class="dropdown-menu " aria-labelledby="dropdownKebab">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>-->

                </div>
                <div class="toolbar-pf-action-right">
                    <!--<div class="form-group toolbar-pf-find">
                        <button class="btn btn-link btn-find" type="button">
                            <span class="fa fa-search"></span>
                        </button>
                        <div class="find-pf-dropdown-container">
                            <input type="text" class="form-control" id="find" placeholder="Find By Keyword...">
                            <div class="find-pf-buttons">
                                <span class="find-pf-nums">1 of 3</span>
                                <button class="btn btn-link" type="button">
                                    <span class="fa fa-angle-up"></span>
                                </button>
                                <button class="btn btn-link" type="button">
                                    <span class="fa fa-angle-down"></span>
                                </button>
                                <button class="btn btn-link btn-find-close" type="button">
                                    <span class="pficon pficon-close"></span>
                                </button>
                            </div>
                        </div>
                    </div>-->
                    <div class="form-group toolbar-pf-view-selector">
                        <button (click)="changeView('LargeCards')" class="btn btn-link "><i class="fa fa-th-large"></i></button>
                        <button (click)="changeView('SmallCards')" class="btn btn-link "><i class="fa fa-th"></i></button>
                        <button (click)="changeView('List')" class="btn btn-link "><i class="fa fa-th-list"></i></button>
                    </div>
                </div>
            </div>
            <!--<div class="row toolbar-pf-results">
                <div class="col-sm-12">
                    <h5>40 Results</h5>
                    <p>Active filters:</p>
                    <ul class="list-inline">
                        <li>
                            <span class="label label-info">
                                Name: nameofthething
                                <a href="#"><span class="pficon pficon-close"></span></a>
                            </span>
                        </li>
                        <li>
                            <span class="label label-info">
                                Name: nameofthething
                                <a href="#"><span class="pficon pficon-close"></span></a>
                            </span>
                        </li>
                        <li>
                            <span class="label label-info">
                                Name: nameofthething
                                <a href="#"><span class="pficon pficon-close"></span></a>
                            </span>
                        </li>
                    </ul>
                    <p><a href="#">Clear All Filters</a></p>
                </div><!-- /col --
            </div>--><!-- /row -->
        </div><!-- /col -->
    </div><!-- /row -->
</div><!-- /container -->