Add custom content outlet for IgxGridToolbar - 6.2.x

projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss

@@ -15,6 +15,10 @@
         @extend %igx-grid-toolbar__title !optional;
     }
 
+    @include e(custom-content){
+        @extend %igx-grid-toolbar__custom-content !optional;
+    }
+
     @include e(actions){
         @extend %igx-grid-toolbar__actions !optional;
     }

projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss

@@ -277,6 +277,11 @@
         @include ellipsis();
     }
 
+    %igx-grid-toolbar__custom-content {
+        display: flex;
+        flex-flow: row wrap;
+    }
+
     %igx-grid-toolbar__actions {
         display: flex;
         align-items: center;

projects/igniteui-angular/src/lib/grids/grid-base.component.ts

@@ -61,6 +61,7 @@ import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from
 import { IgxGridRowComponent } from './grid';
 import { IgxFilteringService } from './filtering/grid-filtering.service';
 import { IgxGridFilteringCellComponent } from './filtering/grid-filtering-cell.component';
+import { IgxGridToolbarCustomContentDirective } from './grid-toolbar.component';
 
 const MINIMUM_COLUMN_WIDTH = 136;
 
@@ -1232,6 +1233,16 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     @ViewChild('scrollContainer', { read: IgxGridForOfDirective })
     public parentVirtDir: IgxGridForOfDirective<any>;
 
+    /**
+     * Returns the template which will be used by the toolbar to show custom content.
+     * ```typescript
+     * let customContentTemplate = this.grid.toolbarCustomContentTemplate;
+     * ```
+     * @memberof IgxGridBaseComponent
+     */
+    @ContentChild(IgxGridToolbarCustomContentDirective, { read: IgxGridToolbarCustomContentDirective })
+    public toolbarCustomContentTemplate: IgxGridToolbarCustomContentDirective;
+
     /**
      * @hidden
      */

projects/igniteui-angular/src/lib/grids/grid-common.module.ts

@@ -55,6 +55,7 @@ import {
     IgxRowEditTabStopDirective
 } from './grid.rowEdit.directive';
 import { IgxGridNavigationService } from './grid-navigation.service';
+import { IgxGridToolbarCustomContentDirective } from './grid-toolbar.component';
 
 @NgModule({
     declarations: [
@@ -64,6 +65,7 @@ import { IgxGridNavigationService } from './grid-navigation.service';
         IgxGridHeaderComponent,
         IgxGridSummaryComponent,
         IgxGridToolbarComponent,
+        IgxGridToolbarCustomContentDirective,
         IgxCellFooterTemplateDirective,
         IgxCellHeaderTemplateDirective,
         IgxCellEditorTemplateDirective,
@@ -95,6 +97,7 @@ import { IgxGridNavigationService } from './grid-navigation.service';
         IgxGridHeaderComponent,
         IgxGridSummaryComponent,
         IgxGridToolbarComponent,
+        IgxGridToolbarCustomContentDirective,
         IgxCellFooterTemplateDirective,
         IgxCellHeaderTemplateDirective,
         IgxCellEditorTemplateDirective,

projects/igniteui-angular/src/lib/grids/grid-toolbar.component.html

@@ -2,6 +2,11 @@
     {{ getTitle() }}
 </span>
 
+<div class="igx-grid-toolbar__custom-content" *ngIf="customContentTemplate != null">
+    <ng-container *ngTemplateOutlet="customContentTemplate; context: context">
+    </ng-container>
+</div>
+
 <div class="igx-grid-toolbar__actions">
     <div *ngIf="grid.columnHiding">
         <button igxButton="flat" #columnHidingButton name="btnColumnHiding" igxButton igxRipple

projects/igniteui-angular/src/lib/grids/grid-toolbar.component.ts

@@ -1,11 +1,13 @@
 import {
     ChangeDetectorRef,
     Component,
+    Directive,
     HostBinding,
     Input,
     Optional,
     ViewChild,
-    Inject
+    Inject,
+    TemplateRef
 } from '@angular/core';
 
 import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity';
@@ -350,4 +352,40 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
         this._overlaySettings.outlet = this.grid.outletDirective;
         this.columnPinningDropdown.toggle(this._overlaySettings);
     }
+
+    /**
+     * Returns the `context` object which represents the `template context` binding into the
+     * `toolbar custom container` by providing references to the parent IgxGird and the toolbar itself.
+     * ```typescript
+     * let context =  this.igxGrid.toolbar.context;
+     * ```
+     */
+    public get context(): any {
+        return {
+            // $implicit: this
+            grid: this.grid,
+            toolbar: this
+        };
+    }
+
+    /** @hidden */
+    public get customContentTemplate(): TemplateRef<any> {
+        if (this.grid != null && this.grid.toolbarCustomContentTemplate != null) {
+            return this.grid.toolbarCustomContentTemplate.template;
+        } else {
+            return null;
+        }
+    }
+}
+
+/**
+ * The IgxGridToolbarCustomContentDirective directive is used to mark an 'ng-template' (with
+ * the 'igxToolbarCustomContent' selector) defined in the IgxGrid which is used to provide
+ * custom content for cener part of the IgxGridToolbar.
+ */
+@Directive({
+    selector: '[igxToolbarCustomContent]'
+})
+export class IgxGridToolbarCustomContentDirective {
+    constructor(public template: TemplateRef<any>) { }
 }