How can I ensure that two instances of the same component on a page are always synchronized, so when one changes, the other also changes simultaneously? Currently, only one component updates when a button is clicked. How can I make them change together and always stay similar or identical?
page.component.html
<app-clock></app-clock> //same component
<app-clock></app-clock> //same component
clock.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';
import { SiblingService } from '../sibling.service';
@Component({
selector: 'app-clock',
templateUrl: './clock.component.html',
styleUrls: ['./clock.component.css'],
})
export class ClockComponent implements OnInit {
public clockIn: any[]= [];
public clockOut: any[]= [];
public tCount: any[]= [];
today = Date.now();
public enableButton = false
constructor(public datepipe: DatePipe, private sibService: SiblingService) {
setInterval(()=> {this.today = Date.now()},1)}
ngOnInit(){}
public regClock(){
let currentDT = this.datepipe.transform((new Date), 'MM/dd/yyyy h:mm');
let check = true;
if (this.enableButton == true){
this.enableButton = !this.enableButton;
this.clockOut.push(currentDT);
let lastC_in = this.clockIn[this.clockIn.length-1];
let lastC_out = this.clockOut[this.clockOut.length-1];
let start = new Date(lastC_in).getTime();
let end = new Date(lastC_out).getTime();
let time = end - start;
let diffDay = Math.floor(time/86400000);
let diffHour = Math.floor((time % 86400000)/3600000);
let diffMin = Math.floor(((time % 86400000)%3600000)/60000);
let timeCount = diffDay + "day(s) "+ diffHour+"Hour(s) "+diffMin+"Min(s)"
this.tCount.push(timeCount);
}
else{
// console.log("in")
this.clockIn.push(currentDT);
this.enableButton = !this.enableButton;
}
}
}
clock.component.html
<div class="outer">
<div class="inner">
<div class="time" id="f-way"> {{today | date: 'fullDate'}}</div>
<div class="time" id="t-way"> {{today | date: 'h:mm:ss a'}}</div>
</div>
<div [ngSwitch]="enableButton" id="btn-p">
<button *ngSwitchCase="false" (click)="regClock()" class="btn" >Clock In</button>
<button *ngSwitchCase="true" (click)="regClock()" class="btn" >Clock Out</button>
</div>
</div>