feat(combo): add simple combo demo

Author: jackofdiamond5

src/app/combo/combo.sample.html

@@ -12,13 +12,27 @@
                     <input igxInput name="age" placeholder="Age" />
                 </igx-input-group>
             </div>
+            <div>
+                <h5 class="sample-title">Simple Combo in Template Form</h5>
+                <form>
+                    <igx-simple-combo class="input-container" [placeholder]="'Locations'" name="anyName"
+                        #comboModel="ngModel" [(ngModel)]="singleValue" minlength="2" required [data]="items"
+                        [displayKey]="valueKeyVar" [disabled]="isDisabled" [valueKey]="valueKeyVar"
+                        [groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
+                        <label igxLabel>States</label>
+                        <igx-hint>Please select the state you've visited</igx-hint>
+                    </igx-simple-combo>
+                </form>
+                <button igxButton (click)="values1 = values1.concat(['Missouri'])">Add Missouri</button>
+                <button igxButton (click)="values1 = []">Clear values </button>
+            </div>
             <div>
                 <h5 class="sample-title">Template Form</h5>
                 <form>
                     <igx-combo class="input-container" [placeholder]="'Locations'" name="anyName" #comboModel="ngModel"
-                        [(ngModel)]="values1" minlength="2" required
-                        [data]="items" [filterable]="filterableFlag" [displayKey]="valueKeyVar" [disabled]="isDisabled"
-                        [valueKey]="valueKeyVar" [groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
+                        [(ngModel)]="values1" minlength="2" required [data]="items" [filterable]="filterableFlag"
+                        [displayKey]="valueKeyVar" [disabled]="isDisabled" [valueKey]="valueKeyVar"
+                        [groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
                         <label igxLabel>States</label>
                         <igx-hint>Please select the states you've visited</igx-hint>
                     </igx-combo>
@@ -39,13 +53,13 @@ <h5 class="sample-title">Reactive Form</h5>
                 </form>
             </div>
             <div class="input-row">
-                <igx-combo #playgroundCombo class="input-container" [placeholder]="'Locations'" [showSearchCaseIcon]='true'
-                    (addition)="handleAddition($event)" (selectionChanging)="handleSelectionChange($event)"
-                    [data]="items" [allowCustomValues]="customValuesFlag" [displayDensity]="'comfortable'"
+                <igx-combo #playgroundCombo class="input-container" [placeholder]="'Locations'"
+                    [showSearchCaseIcon]='true' (addition)="handleAddition($event)"
+                    (selectionChanging)="handleSelectionChange($event)" [data]="items"
+                    [allowCustomValues]="customValuesFlag" [displayDensity]="'comfortable'"
                     [autoFocusSearch]="autoFocusSearch" [filterable]="filterableFlag" [displayKey]="valueKeyVar"
                     [valueKey]="valueKeyVar" [groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
-                    <ng-template *ngIf="currentDataType !== 'primitive'" #itemTemplate let-display
-                        let-key="valueKey">
+                    <ng-template *ngIf="currentDataType !== 'primitive'" #itemTemplate let-display let-key="valueKey">
                         <div class="state-card--simple">
                             <div class="display-value--main">{{display[key]}}</div>
                             <div class="display-value--sub">{{display.region}}</div>
@@ -63,7 +77,8 @@ <h5 class="sample-title">Reactive Form</h5>
                     <ng-template igxComboFooter>
                         <div class="custom-combo-footer">This is a footer</div>
                     </ng-template>
-                    <ng-template *ngIf="currentDataType !== 'primitive'" #headerItemTemplate let-display let-key="groupKey">
+                    <ng-template *ngIf="currentDataType !== 'primitive'" #headerItemTemplate let-display
+                        let-key="groupKey">
                         <div>Group header for {{display[key]}}</div>
                     </ng-template>
                     <ng-template igxComboAddItem>
@@ -111,7 +126,7 @@ <h4>Display Density</h4>
         <div>
             <igx-buttongroup>
                 <button igxButton [disabled]="igxCombo.displayDensity === compact"
-                (click)="setDensity('compact')">Compact</button>
+                    (click)="setDensity('compact')">Compact</button>
                 <button igxButton [disabled]="igxCombo.displayDensity === cosy"
                     (click)="setDensity('cosy')">Cosy</button>
                 <button igxButton [disabled]="igxCombo.displayDensity === comfortable"
@@ -122,8 +137,8 @@ <h4>Item Height</h4>
         <div>
             <igx-buttongroup>
                 <button igxButton [disabled]="playgroundCombo.itemHeight === 56"
-                (click)="playgroundCombo.itemHeight = 56">
-                Set ItemHeight to 56
+                    (click)="playgroundCombo.itemHeight = 56">
+                    Set ItemHeight to 56
                 </button>
                 <button igxButton [disabled]="playgroundCombo.itemHeight === null"
                     (click)="playgroundCombo.itemHeight = null">

src/app/combo/combo.sample.ts

@@ -29,6 +29,7 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
     public autoFocusSearch = true;
     public items: any[] = [];
     public values1:  Array<any> = ['Arizona'];
+    public singleValue = 'Arizona';
     public values2:  Array<any>;
     public isDisabled = false;