[Question] Synchronising two timers when one behind *ngIf statement

[majkers]

Is there a way to synchronize two timers when one is displayed always and only hidden by css styles on MD and SM screens and the other is displayed on MD and SM screens but on an panel that is behind *ngIf condition that becomes true on click?

More or less like that:

<countdown #first [config]="sessionTimerConfig" class="visibleOnLargeScreensOnly">

<button (click)="show = !show" class="visibleOnMediumAndSmallScreensOnly">
<div *ngIf="show" class="visibleOnMediumAndSmallScreensOnly">
  <countdown #second [config]="{leftTime: first.left/1000}" class="visibleOnLargeScreensOnly">
</div>

Currently I do it like that (to tell the truth first is a ViewChild property of component): [config]="{leftTime: first.left/1000}" but sometimes they are out of syns for 500ms more or less... Do you know any better way to do that?

[cipchk]

Please try to reproduce the problem via https://stackblitz.com/edit/ngx-countdown-setup

I can't reproduce it.

[majkers]

OK. https://stackblitz.com/edit/ngx-countdown-setup-csak79?file=src/main.ts It is my question and not a bug. How to synchro two timers when one behind *ngIf

[cipchk]

I think this is caused by the angular diff rendering mechanism, maybe using hide instead of ngIf, like this:

-  <button (click)="changeShow()">Click me</button>
-  <div *ngIf="show">
-    <countdown [config]="{leftTime: first.left/1000}"></countdown>
-  </div>
+  <button (click)="changeShow()">Click me</button>
+  <div [style.display]="show ? 'block' : 'none'">
+    <countdown [config]="{leftTime: 30}"></countdown>
+  </div>

[majkers]

Sorry can't do that. It is just a sample of code that I have. In a real application I use primeng coponent that acts the same way i.e. using ngIf. I can't change it to use style hide.