list format

src/app/components/job-group/job-group.component.html

@@ -1,4 +1,4 @@
-<div style="background-color: aliceblue; min-height: 150px;">
+<div style="min-height: 150px;">
   <div *ngIf="group_count == 0 ">
     <ion-grid>
       <ion-row>
@@ -55,8 +55,13 @@
 
           <ion-item-sliding *ngFor="let item of jobGroupListFilterdData">
             <ion-item style="display: inline-flex;">
-              <div>{{item.firstname}} {{item.lastname}}</div>
+              <div class="text">
-              <div>{{item.email}} </div>
+                <ion-label class="bold_text">{{item.firstname}} {{item.lastname}}</ion-label>
+                <ion-label class="grey_text">{{item.email}}</ion-label>
+              </div>
+
+<!--              <div>{{item.firstname}} {{item.lastname}}</div>-->
+<!--              <div>{{item.email}} </div>-->
             </ion-item>
 
             <ion-item-options>
@@ -238,8 +243,10 @@
       <ion-list>
         <ion-item-sliding  *ngFor="let item of jobGroupListFilterdData">
           <ion-item>
-            <ion-label>{{item.firstname}} {{item.lastname}}</ion-label>
+            <div class="text">
-            <ion-label>{{item.email}} </ion-label>
+              <ion-label class="bold_text">{{item.firstname}} {{item.lastname}}</ion-label>
+              <ion-label class="grey_text">{{item.email}}</ion-label>
+            </div>
           </ion-item>
 
           <ion-item-options>

src/app/components/job-group/job-group.component.scss

@@ -0,0 +1,13 @@
+.text {
+  margin-left: 10px;
+}
+
+.bold_text {
+  font-size: 16px;
+  font-family: 'bold';
+}
+
+.grey_text {
+  font-size: 14px;
+  color: grey;
+}