Problem with updating nested component

[Tomson124]

I created a component which is displayed inside the dashboard component. It will show the current temperature which a service gathers through a resolver from my backend API. The problem is that the inital setting of the value shows on the website/component. But if the variabe is updated the value on the frontend does not update or change. This is the component for showing the temperature. The "tempSolar" and "tempWater" variables are used by interpolation in the html of the "TempsComponent".

import { Component, OnInit, Input, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { TempsService, Temps } from '../../temps.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-temps',
  templateUrl: './temps.component.html',
  styleUrls: ['./temps.component.scss']
})
export class TempsComponent implements OnInit, AfterViewInit {

  @Input() solar: boolean;
  solarNum: number = 0;
  waterNum: number = 1;
  tempSolar = 2;
  tempWater: number = 10;
  timestamp: string;

  temps: Temps;

  constructor(private route: ActivatedRoute, private tempService: TempsService) { }

  showInitTemps() {
    this.route.data.subscribe(({ temps }) => {
      this.tempSolar = temps[this.solarNum].rawValue;
      this.tempWater = temps[this.waterNum].rawValue;
    });
  }

  updateTemps() {
    this.tempService.channel.bind('data-update-event', function(data) {
      console.log('number: ' + data[0]);
      this.tempSolar = data[0];
      console.log('solar: ' + this.tempSolar);
    });
  }

  ngOnInit() {
   this.showInitTemps();
   this.updateTemps();

  }
}

For more detailed info the github is: https://github.com/Tomson124/ResolVbus-Dashboard/tree/now-ui