added interpolation in vars

Author: daros10

src/app/components/options-sidebar/time-clock/time-clock.component.html

@@ -16,8 +16,8 @@
         </div>
 
         <div class="card-body">
-            <p *ngIf="!isClockIn" class="card-title text-left"><strong>Dario</strong> clocked <strong class="text-success">in</strong> at <strong>hh:mm:ss</strong></p>
-            <p *ngIf="isClockIn" class="card-title text-left"><strong>Dario</strong> clocked <strong class="text-danger">out</strong> at <strong>hh:mm:ss</strong></p>
+            <p *ngIf="!isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-success">in</strong> at <strong>{{ clockInUsername }}</strong></p>
+            <p *ngIf="isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-danger">out</strong> at <strong>{{ clockOutUsername }}</strong></p>
             <h6 class="text-left"><strong>Totals</strong></h6>
             <hr>
             <div class="row">

src/app/components/options-sidebar/time-clock/time-clock.component.ts

@@ -7,6 +7,10 @@ import { Component, OnInit } from '@angular/core';
 })
 export class TimeClockComponent {
 
+  username = 'Dario';
+  clockInUsername = 'hh:mm:ss';
+  clockOutUsername = 'hh:mm:ss';
+
   isClockIn: boolean;
   isEnterTechnology: boolean;
   showAlertEnterTecnology: boolean;