style: example updated

Author: lokesh-coder

src/app/app.component.html

@@ -82,7 +82,7 @@ <h2><i data-feather="play"></i> Custom template</h2>
                 <div class="form-group">
                   <label class="sr-only" for="exampleInputAmount">Colors</label>
                   <div class="input-group">
-                    <input type="text" placeholder="choose" class="form-control" choosySingleSelect [options]="addresses" [config]="{displayValue:'street',search:{keys:['value.street','value.country']}}"
+                    <input type="text" placeholder="choose" class="form-control" choosySingleSelect [options]="users" [config]="{displayValue:'email',search:{keys:['value.email','value.name.first','value.name.last']}}"
                       [template]="add" (isOpen)="foobar=$event" (choosy)="addressEvent($event)" />
                     <div class="input-group-addon" (click)="openAddressDd($event)">
                       <i class="fa" [ngClass]="{'fa-angle-up':foobar,'fa-angle-down':!foobar}"></i>
@@ -100,6 +100,13 @@ <h2><i data-feather="play"></i> Custom template</h2>
 
 
 <ng-template let-item #add>
-  <div><strong>{{item.street}}</strong></div>
-  <div>{{item.city}} &middot; {{item.country}}</div>
+  <div class="card">
+    <div class="pic">
+      <img src="{{item.picture.thumbnail}}">
+    </div>
+    <div class="detail">
+      <div><strong>{{item.name.first}} {{item.name.last}}</strong></div>
+      <div>{{item.email}}</div>
+    </div>
+  </div>
 </ng-template>

src/app/app.component.scss

@@ -1,3 +1,26 @@
 #box {
     text-align: center;
 }
+
+.card {
+    display: flex;
+    align-items: center;
+    .pic {
+        margin-right: 12px;
+        img {
+            border-radius: 100%;
+            transition: all 0.5s ease;
+            transform: scale(0.95);
+        }
+    }
+    .detail {
+        div:last-child {
+            opacity: 0.5;
+        }
+    }
+    &:hover {
+        .pic img {
+            transform: scale(1);
+        }
+    }
+}