Merge branch 'vNext' into mvenkov/add-row-selector-template-samples

live-editing/configs/ComboConfigGenerator.ts

@@ -1,6 +1,8 @@
 import { HttpClientModule } from "@angular/common/http";
-import { IgxComboModule, IgxSelectModule, IgxSwitchModule, IgxToastModule } from "igniteui-angular";
+import { IgxButtonModule, IgxCardModule, IgxComboModule, IgxSelectModule,
+    IgxSwitchModule, IgxToastModule } from "igniteui-angular";
 import { RemoteService } from "../../src/app/grid/services/remote.service";
+import { ComboBindingComponent } from "../../src/app/lists/combo/combo-binding/combo-binding.component";
 import { ComboFeatures } from "../../src/app/lists/combo/combo-features/combo-features.component";
 import { ComboMainComponent } from "../../src/app/lists/combo/combo-main/combo-main.component";
 import { ComboOverlayComponent } from "../../src/app/lists/combo/combo-overlay/combo-overlay.component";
@@ -91,6 +93,17 @@ export class ComboConfigGenerator implements IConfigGenerator {
             component: ComboOverlayComponent
         }));
 
+        configs.push(new Config({
+            additionalFiles: ["/src/app/lists/combo/combo-binding/cities.ts"],
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxComboModule, IgxButtonModule, IgxCardModule, ComboBindingComponent],
+                ngDeclarations: [ComboBindingComponent],
+                ngImports: [IgxComboModule, IgxButtonModule, IgxCardModule]
+            }),
+            component: ComboFeatures,
+            shortenComponentPathBy: "/lists/combo/"
+        }));
+
         return configs;
     }
 }

src/app/lists/combo/combo-binding/cities.ts

@@ -0,0 +1,74 @@
+export interface ICity {
+    name: string;
+    id: string;
+    country: string;
+}
+
+export const CITIES: ICity[] = [
+    {
+        name: "Sofia",
+        id: "BG01",
+        country: "Bulgaria"
+    }, {
+        name: "Plovdiv",
+        id: "BG02"
+        ,
+        country: "Bulgaria"
+    }, {
+        name: "Varna",
+        id: "BG03",
+        country: "Bulgaria"
+    }, {
+        name: "Burgas",
+        id: "BG04",
+        country: "Bulgaria"
+    }, {
+        name: "London",
+        id: "UK01",
+        country: "United Kingdom"
+    }, {
+        name: "Birmingham",
+        id: "UK02",
+        country: "United Kingdom"
+    }, {
+        name: "Liverpool",
+        id: "UK03",
+        country: "United Kingdom"
+    }, {
+        name: "Nottingham",
+        id: "UK04",
+        country: "United Kingdom"
+    }, {
+        name: "Tokyo",
+        id: "JP01",
+        country: "Japan"
+    }, {
+        name: "Yokohama",
+        id: "JP02",
+        country: "Japan"
+    }, {
+        name: "Osaka",
+        id: "JP03",
+        country: "Japan"
+    }, {
+        name: "Nagoya",
+        id: "JP04",
+        country: "Japan"
+    }, {
+        name: "Berlin",
+        id: "DE01",
+        country: "Germany"
+    }, {
+        name: "Hamburg",
+        id: "DE02",
+        country: "Germany"
+    }, {
+        name: "Munich",
+        id: "DE03",
+        country: "Germany"
+    }, {
+        name: "Koeln",
+        id: "DE04",
+        country: "Germany"
+    }
+];

src/app/lists/combo/combo-binding/combo-binding.component.html

@@ -0,0 +1,23 @@
+<div class="combo-section">
+    <igx-combo #withValueKey [data]="cities" valueKey="id" displayKey="name" groupKey="country"
+        [(ngModel)]="selectedValueKey">
+    </igx-combo>
+    <button igxButton  (click)="selectFavorites(true)">Select Favorites</button>
+    <h6>Selected Cities:</h6>
+    <div>{{ selectedValueKey }}</div>
+</div>
+<div class="combo-section">
+    <igx-combo #noValueKey [data]="cities" displayKey="name" groupKey="country" [(ngModel)]="selectedNoValueKey">
+    </igx-combo>
+    <button igxButton (click)="selectFavorites(false)">Select Favorites</button>
+    <h6>Selected Cities:</h6>
+    <div class="cities-container">
+        <igx-card type="outlined" *ngFor="let city of selectedNoValueKey">
+            <igx-card-header>
+                <h5 igxCardHeaderTitle>{{ city.name }}</h5>
+                <h5 igxCardHeaderSubtitle>{{ city.country }}</h5>
+                {{ city.id }}
+            </igx-card-header>
+        </igx-card>
+    </div>
+</div>

src/app/lists/combo/combo-binding/combo-binding.component.scss

@@ -0,0 +1,23 @@
+:host {
+    display: flex;
+    width: 100%;
+    flex-flow: row wrap;
+}
+
+button {
+    margin: 8px 0px;
+}
+
+.combo-section {
+    margin: 24px;
+    width: 320px;
+}
+
+.cities-container {
+    max-height: 200px;
+    overflow-y: auto;
+
+    igx-card {
+        margin: 8px 8px 8px 0;
+    }
+}

src/app/lists/combo/combo-binding/combo-binding.component.ts

@@ -0,0 +1,34 @@
+import { Component, ViewChild } from "@angular/core";
+import { IComboSelectionChangeEventArgs, IgxComboComponent } from "igniteui-angular";
+import { CITIES, ICity } from "./cities";
+
+@Component({
+    selector: "app-combo-binding",
+    templateUrl: "combo-binding.component.html",
+    styleUrls: ["combo-binding.component.scss"]
+})
+export class ComboBindingComponent {
+    @ViewChild("withValueKey", { read: IgxComboComponent, static: false })
+    public comboValueKey: IgxComboComponent;
+    @ViewChild("noValueKey", { read: IgxComboComponent, static: false })
+    public comboNoValueKey: IgxComboComponent;
+
+    public cities: ICity[] = CITIES;
+    public selectedValueKey: string[] = ["UK01", "BG01"];
+    public selectedNoValueKey: ICity[] = [this.cities[4], this.cities[0]];
+
+    public handleSelectionChange(event: IComboSelectionChangeEventArgs) {
+        console.log(event);
+    }
+
+    public selectFavorites(valueKey: boolean) {
+        if (valueKey) {
+            this.comboValueKey.selectItems(["UK01", "BG01", "DE01", "JP01"]);
+        } else {
+            const selectedItems: ICity[] = this.cities.filter((e: ICity) => {
+                return ["UK01", "BG01", "DE01", "JP01"].indexOf(e.id) > -1;
+            });
+            this.comboNoValueKey.selectItems(selectedItems);
+        }
+    }
+}

src/app/lists/lists-routes-data.ts

@@ -2,6 +2,7 @@
 
 export const listsRoutesData = {
     "combo-features": { displayName: "Combos Features", parentName: "Combo" },
+    "combo-binding": { displayName: "Combo Binding", parentName: "Combo" },
     "combo-remote": { displayName: "Remote Combo", parentName: "Combo" },
     "combo-styling": { displayName: "Combo Styling", parentName: "Combo" },
     "combo-template": { displayName: "Templating Combo", parentName: "Combo" },

src/app/lists/lists-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 import { CascadingCombos } from "./combo/cascading-combos/cascading-combos.component";
+import { ComboBindingComponent } from "./combo/combo-binding/combo-binding.component";
 import { ComboFeatures } from "./combo/combo-features/combo-features.component";
 import { ComboMainComponent } from "./combo/combo-main/combo-main.component";
 import { ComboOverlayComponent } from "./combo/combo-overlay/combo-overlay.component";
@@ -24,6 +25,11 @@ export const listsRoutes: Routes = [
         component: ComboMainComponent,
         path: "combo"
     },
+    {
+        component: ComboBindingComponent,
+        data: listsRoutesData["combo-binding"],
+        path: "combo-binding"
+    },
     {
         component: ComboFeatures,
         data: listsRoutesData["combo-features"],

src/app/lists/lists.module.ts

@@ -6,6 +6,7 @@ import {
     IgxAvatarModule,
     IgxButtonGroupModule,
     IgxButtonModule,
+    IgxCardModule,
     IgxComboModule,
     IgxFilterModule,
     IgxIconModule,
@@ -18,6 +19,7 @@ import {
     IgxToastModule
 } from "igniteui-angular";
 import { CascadingCombos } from "./combo/cascading-combos/cascading-combos.component";
+import { ComboBindingComponent } from "./combo/combo-binding/combo-binding.component";
 import { ComboFeatures } from "./combo/combo-features/combo-features.component";
 import { ComboMainComponent } from "./combo/combo-main/combo-main.component";
 import { ComboOverlayComponent } from "./combo/combo-overlay/combo-overlay.component";
@@ -54,7 +56,8 @@ import { ListsRoutingModule } from "./lists-routing.module";
         ComboMainComponent,
         ComboRemoteComponent,
         ComboTemplateComponent,
-        ComboOverlayComponent
+        ComboOverlayComponent,
+        ComboBindingComponent
     ],
     imports: [
         CommonModule,
@@ -73,7 +76,8 @@ import { ListsRoutingModule } from "./lists-routing.module";
         IgxToastModule,
         IgxButtonGroupModule,
         HttpClientModule,
-        IgxRippleModule
+        IgxRippleModule,
+        IgxCardModule
     ]
 })
 export class ListsModule { }