How do I capture an element in typescript and set it's atributes via ts

Daniel Fabre 0
Viewed 22

So i'm using this tool

https://www.npmjs.com/package/angular-cd-timer

and I've added it to my navbar. This navbar appears in 8 pages or so, but I just want the timer to be visible and works in 4 different pages.

The structure of the component in html

<cd-timer [countdown]="true" [startTime]="300" [endTime]="0" format="ms" (onComplete)="timerEnd()"
            class="timerStyle"></cd-timer>

What I want! I wan to set this values like startTime,endTime on typeScript, and for each page have different values, and for the pages that I do not want to appear just make it invisible.

How do I do this? And it would be best to make all the code on the navbar component where this code lies, or in each page that I want it to function?

timer typescript angular
1 Answers

If you want to set different values for each page, and only some pages has the timer, then the timer shouldn't be in the navbar. Navbar is supposed to be global and be shared among all pages.

The sensible thing to do is to have each page uses the timer. The other pages that doesn't need the timer just need to exclude it.

Please note that this also create a better user experience because placing the timer in the navbar confuses users. The timer should have a dedicated place in each page. It can be right below the navbar and above the page.

page1.component.ts


//... add all imports

@Component({
 //...
})
export class Page1Component {

// these will be used in the html.
public readonly startTime = 300;
public readonly endTime = 0;



}

page1.component.html

<div class="timer">
  <cd-timer [countdown]="true" 
      [startTime]="startTime"
      [endTime]="endTime"
      format="ms" 
      (onComplete)="timerEnd()">
  </cd-timer> 
</div>

<div class="page1-content">
<!-- add your page1 content here -->
</div>
skouch20220
Related