feat(igx-combo): implement templates, filtering, #1260

demos/app/combo/sample.component.html

@@ -1,6 +1,13 @@
+<ng-template #myCustomTemplate let-display let-key="primaryKey">
+    <div>I live in {{display[key]}}</div>
+</ng-template>
 <div class="sample-wrapper">
     <page-header title="Combo" description="Combo lets you choose value from a list"></page-header>
     <section class="sample-content">
-        <igx-combo [data]="items"></igx-combo>
+        <p>Change data to:</p>
+        <button class="igx-button" (click)="changeData('primitive')">Primitve</button>
+        <button class="igx-button" (click)="changeData('complex')">Complex</button>
+        <button class="igx-button" (click)="changeData()">Initial</button>
+        <igx-combo [data]="items" [filter]="true" [primaryKey]="'field'" [customTemplate]="myCustomTemplate"></igx-combo>
     </section>
 </div>

demos/app/combo/sample.component.ts

@@ -1,5 +1,26 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
 import { IgxComboComponent } from "../../lib/main";
+
+const primitive = ["1", "2", "3", "4", "5", "6"];
+const complex = [{
+    field: 1,
+    value: 1
+}, {
+    field: 2,
+    value: 2
+}, {
+    field: 3,
+    value: 3
+}, {
+    field: 4,
+    value: 4
+}, {
+    field: 5,
+    value: 5
+}, {
+    field: 6,
+    value: 6
+}];
 @Component({
     // tslint:disable-next-line:component-selector
     selector: "combo-sample",
@@ -10,9 +31,12 @@ export class ComboSampleComponent implements OnInit {
     private width = "160px";
     @ViewChild(IgxComboComponent) public igxCombo: IgxComboComponent;
 
-    items: any[] = [];
+    private initData: any[] = [];
+    public items: any[] = [];
+    private currentDataType = "";
 
     ngOnInit() {
+        this.igxCombo.dropDown.height = "400px";
         console.log("Sample init");
         console.log(this.items);
     }
@@ -100,9 +124,29 @@ export class ComboSampleComponent implements OnInit {
                 item["disabled"] = true;
             }
             this.items.push(item);
+            this.initData = this.items;
+            this.currentDataType = "initial";
         }
     }
 
+    changeData(type) {
+        switch (type) {
+            case "complex":
+                this.items = complex;
+                this.currentDataType = "complex";
+                console.log(this.items, complex);
+                break;
+            case "primitive":
+                this.items = primitive;
+                this.currentDataType = "primitive";
+                console.log(this.items);
+                break;
+            default:
+                this.items = this.initData;
+                this.currentDataType = "initial";
+                console.log(this.items);
+        }
+    }
     onSelection(ev) {
     }
 }

src/combo/combo.component.html

@@ -1,8 +1,8 @@
-<ng-template #data let-display>
-    {{display.field}}
+<ng-template #complex let-display let-key="primaryKey">
+        {{display[key]}}
 </ng-template>
 <ng-template #primitive let-display>
-    {{display}
+        {{display}}
 </ng-template>
 <ng-template #empty>
     <span>The list is empty</span>
@@ -11,16 +11,15 @@
 <div class="igx-combo">
     <!-- <button igxButton="raised" igxRipple (click)="toggleDropDown()">Toggle</button> -->
     <igx-input-group>
-        <input (focus)="toggleDropDown($event, true)" igxInput name="lastName" type="text" [(ngModel)]="value" />
+        <input (keyup)="hanldeKeyDown($event)" (focus)="toggleDropDown($event, true)" igxInput name="lastName" type="text" [(ngModel)]="value" />
         <label igxLabel for="lastName">Last Name</label>
     </igx-input-group>
     <igx-drop-down (onSelection)="onSelection($event)">
-        <igx-drop-down-item *ngFor="let item of data">
-            <ng-container ngTemplateOutlet="template; context: {$implicit: item}">
-            </ng-container>
+        <igx-drop-down-item *ngFor="let item of displayedData">
+            <ng-container *ngTemplateOutlet="template; context: {$implicit: item, primaryKey: primaryKey};"></ng-container>
         </igx-drop-down-item>
-
     </igx-drop-down>
     <div class=""></div>
 </div>
+
 <!--  -->

src/combo/combo.component.ts

@@ -1,50 +1,59 @@
 import { CommonModule } from "@angular/common";
 import {
     ChangeDetectorRef, Component, ElementRef,
-    EventEmitter, Input, NgModule, OnDestroy, OnInit, Output, TemplateRef, ViewChild
+    EventEmitter, Input, NgModule, OnDestroy, OnInit, Output, TemplateRef, ViewChild, HostListener
 } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { IgxSelectionAPIService } from "../core/selection";
 import { IgxRippleModule } from "../directives/ripple/ripple.directive";
 import { IgxDropDownItemComponent } from "../drop-down/drop-down-item.component";
 import { IgxDropDownComponent, IgxDropDownModule } from "../drop-down/drop-down.component";
-import { IgxInputGroupModule } from "../input-group/input-group.component";
+import { IgxInputGroupModule, IgxInputGroupComponent } from "../input-group/input-group.component";
 
+export enum DataTypes {
+    EMPTY = "empty",
+    PRIMITIVE = "primitive",
+    COMPLEX = "complex",
+    PRIMARYKEY = "primaryKey"
+}
 @Component({
     selector: "igx-combo",
     templateUrl: "combo.component.html"
 })
 export class IgxComboComponent implements OnInit, OnDestroy {
 
+    private _dataType = "";
+    private _filteredData = [];
+    private _dropdownVisible = false;
     public value = "";
 
     @ViewChild(IgxDropDownComponent, { read: IgxDropDownComponent })
     public dropDown: IgxDropDownComponent;
 
+    @ViewChild(IgxInputGroupComponent, { read: IgxInputGroupComponent })
+    public inputGroup: IgxInputGroupComponent;
+
     @ViewChild("primitive", { read: TemplateRef })
     protected primitiveTemplate: TemplateRef<any>;
 
-    @ViewChild("primaryKey", { read: TemplateRef })
-    protected primaryKeyTemplate: TemplateRef<any>;
-
-    @ViewChild("data", { read: TemplateRef })
-    protected dataTemplate: TemplateRef<any>;
+    @ViewChild("complex", { read: TemplateRef })
+    protected complexTemplate: TemplateRef<any>;
 
     @ViewChild("empty", { read: TemplateRef })
     protected emptyTemplate: TemplateRef<any>;
 
-    @ViewChild("empty", { read: TemplateRef })
-    protected customTemplateRef: TemplateRef<any>;
-
     @Input()
     public evalDisabled: (args) => boolean;
 
     @Input()
-    public customTemplate;
+    public customTemplate: TemplateRef<any>;
 
     @Input()
     public data;
 
+    @Input()
+    public filter;
+
     @Input()
     public primaryKey;
 
@@ -63,18 +72,34 @@ export class IgxComboComponent implements OnInit, OnDestroy {
         private element: ElementRef) { }
 
     public ngOnInit() {
-        console.log("Combo init");
-        console.log(this.data);
+        this._dataType = this.getDataType();
+        this._filteredData = this.data;
+        this.dropDown.onOpened.subscribe(() => {
+            this._dropdownVisible = true;
+        });
+        this.dropDown.onClosed.subscribe(() => {
+            this._dropdownVisible = false;
+        });
     }
 
     public ngOnDestroy() {
 
     }
 
+    public get displayedData() {
+        if (this.filter) {
+            return this._filteredData;
+        }
+        return this.data;
+    }
+    public hanldeKeyDown(evt) {
+        this._filteredData = this.data.filter((e) => this.getDataByType(e).indexOf(evt.target.value) > -1);
+    }
+
     public onSelection(event) {
         if (event.newSelection) {
             if (event.newSelection !== event.oldSelection) {
-                this.value = this.data[event.newSelection.index];
+                this.value = this.getData();
             }
         }
     }
@@ -83,26 +108,54 @@ export class IgxComboComponent implements OnInit, OnDestroy {
         if (state !== undefined) {
             if (state) {
                 this.dropDown.open();
-                console.log("Opening");
             }
         }
     }
 
-    public get template(): TemplateRef<any> {
+    private getDataType() {
         if (!this.data || !this.data.length) {
-            return this.emptyTemplate;
+            return DataTypes.EMPTY;
         }
         if (typeof this.data[0] === "object") {
-            if (this.customTemplate !== undefined) {
-                return this.customTemplateRef;
-            }
-            if (this.primaryKey !== undefined) {
-                return this.primaryKeyTemplate;
-            }
-            return this.dataTemplate;
+            return DataTypes.COMPLEX;
+        }
+        return DataTypes.PRIMITIVE;
+    }
+
+    public get template(): TemplateRef<any> {
+        this._dataType = this.getDataType();
+        if (!this.displayedData || !this.displayedData.length) {
+            return this.emptyTemplate;
+        }
+        if (this.customTemplate) {
+            return this.customTemplate;
+        }
+        if (this._dataType === DataTypes.COMPLEX) {
+            return this.complexTemplate;
         }
         return this.primitiveTemplate;
     }
+
+    public get context(): any {
+        return {
+            $implicit: this
+        };
+    }
+
+    private getDataByType(dataObj) {
+        if (this._dataType === DataTypes.PRIMITIVE || this._dataType === DataTypes.EMPTY) {
+            return dataObj;
+        }
+        if (this._dataType === DataTypes.PRIMARYKEY || this._dataType === DataTypes.COMPLEX) {
+            return dataObj[this.primaryKey];
+        }
+    }
+    private getCurrentSelected() {
+        return this.dropDown.selectedItem.index;
+    }
+    private getData(): any {
+        return this.getDataByType(this._filteredData[this.getCurrentSelected()]);
+    }
 }
 
 export interface IComboDropDownOpenEventArgs {

src/grid/grid.component.ts

@@ -1179,7 +1179,7 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
     }
 
     public selectAllRows() {
-        this.triggerRowSelectionChange(this.selectionAPI.get_all_ids(this.data, this.id));
+        this.triggerRowSelectionChange(this.selectionAPI.get_all_ids(this.data, this.primaryKey));
     }
 
     public deselectAllRows() {