0

I have a button that works as a timer. I created a service so that it is possible to present the operation of this button in several components simultaneously.

My problem is that I can't display the time count on both components when it starts. I've tried a few ways, but without success, can anyone help me?

html

        <div class="btn-group" dropdown>
<button id="button-basic" dropdownToggle aria-controls="dropdown-basic">
    <img *ngIf="taskService.getCurrentState() === 'pause' || taskService.getCurrentState() === undefined" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcW6cJlI-KlS721hkuHDTMydZ_snrkhL9sm9wYHWRhd3FlvF1b&s" width="50" height="50">
    <img *ngIf="taskService.getCurrentState() ==='start'"
    src="https://png.pngtree.com/png-clipart/20190516/original/pngtree-pause-vector-icon-png-image_3791321.jpg" width="50" height="50">
  </button>
<div class="timer">
    <!-- <span>{{(taskService.timerForUsers[data.key.ID].currentTime * 1000) | date:'HH:mm:ss':'UTC'}}</span> -->
    <!-- <span>{{(taskService.timerForUsers[data.key.ID].currentTime * 1000) | date:'HH:mm:ss':'UTC'}}</span> -->
</div>

  • Does this answer your question? [How to communicate between component in Angular?](https://stackoverflow.com/questions/30501577/how-to-communicate-between-component-in-angular) – Reactgular Jan 01 '20 at 13:43

2 Answers2

0

Pass the data to navbar component, so that data[0].ID will be available in the navbar component.

// app.component.html

<app-navbar [data]="data"></app-navbar>

Access, the data in navbar component using @Input() - Component Interaction.

// navbar.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Input() data;

// navbar.component.html
<span *ngIf="data.length > 0">{{(taskService.timerForUsers[data[0].ID].currentTime * 1000) | date:'HH:mm:ss':'UTC'}}</span>
random
  • 7,756
  • 3
  • 19
  • 25
  • It worked great, but is there another way to put this without using the datasource "data"? Thanks for the help ! –  Jan 01 '20 at 13:40
0

you can set your id in userId variable change 

userId:string="1";

and add timer in navbar.component.html

<span>{{(taskService.timerForUsers[userId].currentTime * 1000) | date:'HH:mm:ss':'UTC'}}</span>
kelvin kantaria
  • 1,438
  • 11
  • 15
  • The problem with this solution is that the id is fixed, it won't work for different cases, but thanks for trying to help me! –  Jan 01 '20 at 13:41