Checkboxes are INgit add . But styling needs to be fixed

Author: jal040

src/components/timeline/timeline.html

@@ -5,11 +5,20 @@
         <ng-template #recursiveList let-list>
         <!-- <div class="cd-timeline__img cd-timeline__img--5"></div> -->
         <ion-list *ngFor="let item of list">
-          <h2 (click)="toggleItem(item)">{{item.title}} </h2>
-          <ion-item *ngIf="item.itemExpand && item.children.length > 0">
-          <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
 
+          <h2 *ngIf="!item.checkmark" (click)="toggleItem(item)">{{item.title}} </h2>
+          
+          <ion-item *ngIf="item.checkmark">
+            <ion-label>{{item.title}}</ion-label>
+            <ion-checkbox color="dark" checked="false"></ion-checkbox>
           </ion-item>
+
+          <ion-item *ngIf="item.itemExpand && item.children.length > 0 && !item.checkmark">
+            <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
+          </ion-item>
+          <!-- <ion-item *ngIf="item.checkmark">
+              <ion-checkbox color="dark" checked="false"></ion-checkbox>
+          </ion-item> -->
         </ion-list>
         </ng-template>
         <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
@@ -21,4 +30,4 @@ <h2 (click)="toggleItem(item)">{{item.title}} </h2>
       <ion-icon class="" [name]="endIcon"></ion-icon>
     </timeline-item> -->
 
-  </div>
+  </div>

src/components/timeline/timeline.scss

@@ -5,7 +5,7 @@ timeline {
     }
 
     .label-ios{
-        margin: 11px 8px -15px 0 !important;
+        margin: auto !important;
     }
 
 
@@ -117,12 +117,17 @@ timeline {
         margin: 13px 8px -15px 0;
     }
 
-        &:before {
-            left: 3% !important;
-        }
-        .list, .list-md{
-            margin-left:3% !important;
-        }
+    &:before {
+        left: 3% !important;
+    }
+    .list, .list-md{
+        margin-left:3% !important;
+    }
+
+    .checkbox-ios {
+        // position: absolute !important;
+        margin: -6px 14px 8px -35px !important;
+    }
 
 
     @media screen and (max-width: map-get($grid-breakpoints,'lg')){

src/components/timeline/timeline.ts

@@ -17,9 +17,11 @@ export class TimelineComponent {
   public list = [
     {
       title: 'Getting Out',
+      checkmark: false,
       children: [
         {
           title: 'Understanding the process of separating',
+          checkmark: false,
           children: [
             {
               title: 'Meet with separation counselor',
@@ -35,6 +37,7 @@ export class TimelineComponent {
         },
         {
           title: 'Completing my paperwork',
+          checkmark: false,
           children: [
             {
               title: 'Fill out specific paperwork',
@@ -45,6 +48,7 @@ export class TimelineComponent {
         },
         {
           title: 'Engaging VA to access benefits',
+          checkmark: false,
           children: [
             {
               title: 'Find out what benefits I will have after separation',
@@ -58,6 +62,7 @@ export class TimelineComponent {
     },
     {
       title: 'Starting Up',
+      checkmark: false,
       children: [
         {
           title: 'Find something to do',
@@ -76,6 +81,7 @@ export class TimelineComponent {
         },
         {
           title: 'Re-establishing and creating relationships',
+          checkmark: false,
           children: [
             {
               title: 'Check out vet center',
@@ -86,6 +92,7 @@ export class TimelineComponent {
         },
         {
           title: 'Balancing finances',
+          checkmark: false,
           children: [
             {
               title: 'Open a savings account',
@@ -99,16 +106,19 @@ export class TimelineComponent {
     },
     {
       title: 'Taking care of myself',
+      checkmark: false,
       children: [],
       itemExpand: false
     },
     {
       title: 'Reinventing myself',
+      checkmark: false,
       children: [],
       itemExpand: false
     },
     {
       title: 'Putting down roots',
+      checkmark: false,
       children: [],
       itemExpand: false
     }