samples(list): update sample with displayDensity

IgniteUI/igniteui-angular#4393
IgniteUI · Apr 9, 2019 · 36427ee · 36427ee
1 parent 2a6b179
commit 36427ee
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 5 deletions.
diff --git a/live-editing/configs/ListConfigGenerator.ts b/live-editing/configs/ListConfigGenerator.ts
@@ -1,7 +1,7 @@
 /* tslint:disable:object-literal-sort-keys */
 import {
     IgxAvatarModule, IgxButtonModule, IgxFilterModule, IgxFilterOptions,
-    IgxIconModule, IgxInputGroupModule, IgxListModule, IgxSliderModule, IgxToastModule
+    IgxIconModule, IgxInputGroupModule, IgxListModule, IgxSliderModule, IgxToastModule, IgxButtonGroupModule
 } from "igniteui-angular";
 import { ListChatSampleComponent } from "../../src/app/lists/list/list-chat-sample/list-chat-sample.component";
 import { ListSample1Component } from "../../src/app/lists/list/list-sample-1/list-sample-1.component";
@@ -70,10 +70,10 @@ export class ListConfigGenerator implements IConfigGenerator {
             component: ListSample4Component,
             appModuleConfig: new AppModuleConfig({
                 imports: [IgxAvatarModule, IgxFilterModule, IgxIconModule, IgxListModule,
-                    IgxInputGroupModule, ListSample4Component],
+                    IgxInputGroupModule, IgxButtonGroupModule, ListSample4Component],
                 ngDeclarations: [ListSample4Component],
                 ngImports: [IgxAvatarModule, IgxFilterModule, IgxIconModule, IgxListModule,
-                    IgxInputGroupModule]
+                    IgxInputGroupModule, IgxButtonGroupModule]
             }),
             shortenComponentPathBy: "/lists/list/"
         }));

diff --git a/src/app/lists/list/list-sample-4/list-sample-4.component.html b/src/app/lists/list/list-sample-4/list-sample-4.component.html
@@ -1,3 +1,7 @@
+<div class="density-chooser">
+    <igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)"></igx-buttongroup>
+</div>
+
 <igx-input-group type="search" class="search">
     <igx-prefix>
         <igx-icon>search</igx-icon>
@@ -9,7 +13,7 @@
 </igx-input-group>
 
 <div class="list-sample">
-    <igx-list>
+    <igx-list [displayDensity]="density">
         <igx-list-item isHeader="true">Contacts</igx-list-item>
         <igx-list-item #item *ngFor="let contact of contacts | igxFilter: filterContacts;">
             <div class="item-container">

diff --git a/src/app/lists/list/list-sample-4/list-sample-4.component.scss b/src/app/lists/list/list-sample-4/list-sample-4.component.scss
@@ -9,6 +9,10 @@
         0px 2px 1px -1px rgba(0, 0, 0, 0.12);
 }
 
+.density-chooser {
+    margin-bottom: 16px;
+}
+
 igx-icon {
   cursor: pointer;
 }

diff --git a/src/app/lists/list/list-sample-4/list-sample-4.component.ts b/src/app/lists/list/list-sample-4/list-sample-4.component.ts
@@ -41,9 +41,22 @@ export class ListSample4Component implements OnInit {
     }
   ];
 
+  public density = "comfortable";
+  public displayDensities;
+
   constructor() { }
 
-  public ngOnInit() { }
+  public ngOnInit() {
+    this.displayDensities = [
+        { label: "comfortable", selected: this.density === "comfortable", togglable: true },
+        { label: "cosy", selected: this.density === "cosy", togglable: true },
+        { label: "compact", selected: this.density === "compact", togglable: true }
+    ];
+  }
+
+  public selectDensity(event) {
+    this.density = this.displayDensities[event.index].label;
+  }
 
   public toggleFavorite(contact: any) {
     contact.isFavorite = !contact.isFavorite;

diff --git a/src/app/lists/lists.module.ts b/src/app/lists/lists.module.ts
@@ -4,6 +4,7 @@ import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import {
     IgxAvatarModule,
+    IgxButtonGroupModule,
     IgxButtonModule,
     IgxComboModule,
     IgxFilterModule,
@@ -63,6 +64,7 @@ import { ListsRoutingModule } from "./lists-routing.module";
         IgxSwitchModule,
         IgxSelectModule,
         IgxToastModule,
+        IgxButtonGroupModule,
         HttpClientModule
     ]
 })