I have two of the same component on a page. I am trying to make it so that when I change one the other should also change and vice versa and they should always look exactly the same. Currently when I click a button on one of the components one changes and one does not. How can I make them change together and always be 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)600000)/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 >
    <div >
     <div  id="f-way"> {{today | date: 'fullDate'}}</div>
     <div  id="t-way"> {{today | date: 'h:mm:ss a'}}</div>
    </div>
    <div [ngSwitch]="enableButton" id="btn-p">
        <button *ngSwitchCase="false" (click)="regClock()"  >Clock In</button>
        <button *ngSwitchCase="true" (click)="regClock()"  >Clock Out</button>
    </div>
</div>

CodePudding user response：

The components are the same but *rendered(HTML)/initialized(TS)* each time they are called in the DOM, as you did. Due to this both of them have separated instances running.

The only way you can have one change reflected in another is by creating a global service that is used in your clock.component. Each change that is done in one component should change the value in the global service, which would cause it to be reflected in the other instance of the same component (by subscribing to it).

I suggest You, to look at Subjects and Services, and how to share data using these to achieve what you trying to do.