CODEWITHSUNDEEP
angulartypescript
Mike Landers
Mike Landers

Reputation: 450

Execute function of a different component

I developed a grid with a button that allows me to activate or not a timer.

On the home page, where the grid is, when starting the timer (click on start) the timer starts counting the time.

Through a service I can find out if the timer has been activated or not and change the button status on the navbar component.

How can I pause the timer (execute the pauseTimer function) of the component / home service, but in the navbar component. Basically when a timer is started at home, I intend to pause that same timer, using the stop button but on the navbar component.

Can someone help me?

DEMO

CODE

  startTimer(userId:string) {
    if (!this.timerForUsers[userId]) {
      this.timerForUsers = {
        ...this.timerForUsers,
        [userId]: {
          currentState: 'start',
          currentTime: 0,
          initialTime: 0,
          startTime: `${Date.now()}`
        }
      };
    }

    const currentUserTimer:TimerForUser = this.timerForUsers[userId];
    clearInterval(currentUserTimer.interval);
    currentUserTimer.startTime = `${Date.now()}`;
    currentUserTimer.initialTime = currentUserTimer.currentTime;

    currentUserTimer.interval = setInterval(() => {
      this.timerForUsers = {
        ...this.timerForUsers,
        [userId]: {
          ...this.timerForUsers[userId],
          currentTime: this.timerForUsers[userId].currentTime + 1 
        }
      };
    }, 1000);

    this.userID = userId;
    currentUserTimer.currentState = 'start';
     this.state = currentUserTimer.currentState;


    localStorage.setItem('user_timers', JSON.stringify(this.timerForUsers));
  }

  pauseTimer(userId:string) {
    const currentUserTimer:TimerForUser = this.timerForUsers[userId];

    currentUserTimer.currentState = 'pause';
    this.state = currentUserTimer.currentState;
    clearInterval(currentUserTimer.interval);
    currentUserTimer.interval = null;
    currentUserTimer.initialTime = currentUserTimer.currentTime;
    currentUserTimer.startTime = null;
    localStorage.setItem('user_timers', JSON.stringify(this.timerForUsers));
    currentUserTimer.currentTime = null;
  }

     gettimes() {
    return this.userID;
  }

    getCurrentState() {
    return this.state;
  }

Upvotes: 0

Views: 70

Answers (1)

Duki
Duki

Reputation: 91

If I understood you correctly you want to stop the timer and change the button in nav bar component. checkout the demo Hope it helps

I have added 

public timerAction:ReplaySubject<any> = new ReplaySubject(1);
to the TaskService

and in HomeComponent 

pauseTimer(data) {
     this.taskService.iduser = data.key.ID;
    this.taskService.pauseTimer(data.key.ID);
    this.taskService.timerAction.next(true);// added this
  }
in NavbarComponent

constructor(public taskService: TaskService) { 
    this.taskService.currentUserId.subscribe(x => {
      this.userId = x;
      this.startTimer();
    });
    
    // added this, a subscription that listens to change and triggers pausTimer if true.
    this.taskService.timerAction.subscribe(response =>{
      if(response)
        this.pauseTimer();
    })
  }

Upvotes: 1

Related Questions