fix(select): Remove displayDensity Input. #5843 (#5925)

Add displayDensity sample.

Author: IvayloG

projects/igniteui-angular/src/lib/select/select.component.ts

@@ -160,16 +160,6 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
     @Input()
     public type = 'line';
 
-    /**
-     * An @Input property that sets what display density to be used for the input group.
-     * The allowed values are `compact`, `cosy` and `comfortable`. The default is `comfortable`.
-     * ```html
-     *<igx-select [displayDensity]="'compact'"></igx-select>
-     * ```
-     */
-    @Input()
-    public displayDensity = 'comfortable';
-
     /**
      * The custom template, if any, that should be used when rendering the select TOGGLE(open/close) button
      *

src/app/select/select.sample.html

@@ -4,7 +4,7 @@
 
 <div class="sampleWrapper">
     <h4 class="sample-title">Select with ngModel, set items OnInit</h4>
-    <igx-select #select1
+    <igx-select #displayDensitySelect
     [required]="true"
     [placeholder]="'Pick One'"
     [(ngModel)]="value"
@@ -13,7 +13,8 @@ <h4 class="sample-title">Select with ngModel, set items OnInit</h4>
     (onClosing)="testOnClosing($event)"
     (onClosed)="testOnClosed()"
     (onSelection)="testOnSelection($event)"
-    [disabled]="false">
+    [disabled]="false"
+    [displayDensity]="'cosy'">
         <label igxLabel>Sample Label</label>
         <igx-prefix igxPrefix>
             <igx-icon fontSet="material">alarm</igx-icon>
@@ -24,6 +25,13 @@ <h4 class="sample-title">Select with ngModel, set items OnInit</h4>
         </igx-select-item>
     </igx-select>
 
+    <div>
+        <h4>Display Density</h4>
+        <button igxButton="raised" [disabled]="selectDisplayDensity.displayDensity === compact" (click)="setDensity(compact)">Compact</button>
+        <button igxButton="raised" [disabled]="selectDisplayDensity.displayDensity === cosy" (click)="setDensity(cosy)">Cosy</button>
+        <button igxButton="raised" [disabled]="selectDisplayDensity.displayDensity === comfortable" (click)="setDensity(comfortable)">Comfortable</button>
+    </div>
+
     <h4 class="sample-title">Select - declare items in html template</h4>
     <igx-select #select2
                 [placeholder]="'Pick One'"

src/app/select/select.sample.ts

@@ -4,7 +4,8 @@ import {
     ISelectionEventArgs, CancelableEventArgs, OverlaySettings,
     HorizontalAlignment, VerticalAlignment, scaleInTop, scaleOutBottom, ConnectedPositioningStrategy,
     AbsoluteScrollStrategy,
-    IgxSelectComponent
+    IgxSelectComponent,
+    DisplayDensity
 } from 'igniteui-angular';
 
 @Component({
@@ -19,7 +20,12 @@ export class SelectSampleComponent implements OnInit {
     public select: IgxSelectComponent;
     @ViewChild('model', { read: IgxSelectComponent, static: true })
     public selectFruits: IgxSelectComponent;
+    @ViewChild('displayDensitySelect', { read: IgxSelectComponent, static: true })
+    public selectDisplayDensity: IgxSelectComponent;
 
+    public comfortable = DisplayDensity.comfortable;
+    public cosy = DisplayDensity.cosy;
+    public compact = DisplayDensity.compact;
 
     constructor(fb: FormBuilder) {
         this.reactiveForm = fb.group({
@@ -137,4 +143,8 @@ export class SelectSampleComponent implements OnInit {
             this.selectComponents.first.open(customOverlaySettings);
         }
     }
+
+    setDensity(density: DisplayDensity) {
+        this.selectDisplayDensity.displayDensity = density;
+    }
 }