component.ts

import { Component, OnInit } from '@angular/core';
import { StartyourdayService } from './startyourday.service'
 

@Component({
  selector: 'trc-startyourday',
  template: `
      <button (click)="one()"> {{val_one}} </button>
      <span>{{why.tasks[0].status}}</span>
      <br><br>
      <button (click)="two()"> {{val_two}} </button>
      <span>{{why.tasks[1].status}}</span>
      <br><br>
      <button (click)="three()"> {{val_three}} </button>
      <span>{{why.tasks[2].status}}</span>
`
})
export class StartyourdayComponent implements OnInit {
    constructor( private startyourdayService:StartyourdayService){}
    
    private pageCompleteButton = document.getElementById('page-nav-complete')
    
    private why;

    private val_one;
    private val_two;
    private val_three;

    ngOnInit() {
        //changes with service
        this.why = this.startyourdayService.getState()

        //
        this.val_one = this.startyourdayService.getState().tasks[0].status
        this.val_two = this.startyourdayService.getState().tasks[1].status
        this.val_three = this.startyourdayService.getState().tasks[2].status
    }    

    one(){
        this.startyourdayService.setRegistration('asdas')
    }

    two(){
        this.startyourdayService.setChecklist('asdas')
    }

    three(){  
        this.startyourdayService.setPicture('asdas')
    }

}

service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class StartyourdayService {
    constructor() {}
    
    private okay = {
      tasks : [
          {
              value: null,
              status: "current",
          },
          {
              value: null,
              status: "pending",
          },
          {
              value: null,
              status: "pending",
          }
      ],
      date: '',
      completed: "inactive",
      status : false
    }
    
    
    getState(){ return this.okay  }   
    
    
    setRegistration(set){
        this.okay.tasks[0].status = "complete"    
    }

    setChecklist(set){
        this.okay.tasks[1].status = "complete"      
    }

    setPicture(set){
        this.okay.tasks[2].status = "complete"   
    }

   
}