CODEWITHSUNDEEP
angulartypescript
Mike Landers
Mike Landers

Reputation: 450

Display the same time count but both components simultaneously

How can I display the same time count in both places simultaneously as shown in the image?

I tried to pass the user ID of the component app to the navbar so that I could then use the function to get the timer, but to no avail.

Can anyone help me?

HTML

<p>NavBar</p>
<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"  *ngIf="taskService.getCurrentState() === 'start'" >
        <!-- <span>{{(taskService.timerForUsers[idu].currentTime * 1000) | date:'HH:mm:ss':'UTC'}}</span> -->
    </div>
</div>

Upvotes: 0

Views: 120

Answers (1)

Chirag Patel
Chirag Patel

Reputation: 374

You already have taskService holding the time so you can just use that in the NavBar. If you need to pass a specific user then use @Input() decorator to do so.

in navbar change userId to be input, and add code to show time:

@Input() userId:string;
<span>{{(taskService.timerForUsers[data.key.ID].currentTime * 1000) | date:'HH:mm:ss':'UTC'}}</span>

then in your appComponent bind the Id to the userID input:

<app-navbar  [userId]="data[0].ID"></app-navbar>

Updated link to show multiple users

I have edited your example to show it in action: https://stackblitz.com/edit/angular-9knpqb However: you need to clean up you data model a bit.

you can show multiple users instead by using a property to store the current user to show:

in app component, add the property and event to handle user change:

currData: string;

rowClicked(event: any): void {
    this.currData = event.data.ID;
    console.log(this.currData);
  }

in the html change the binding to navbar and add event on the data grid:

<app-navbar  [userId]="currData"></app-navbar>


<dx-data-grid  [dataSource]="data" height="600" showBorders="true" (onRowClick)="rowClicked($event)">

EDIT: Store User ID for global access

current user id can be stored in the TaskService if it is needed globally using a BehaviourSubject this can then be subscribed to in other components as shown in the updated example: https://stackblitz.com/edit/angular-jqoaaf

Upvotes: 2

Related Questions