title: Angular 7: Updating components variables when the service variables are updated
body: <p>After some time with AngularJS my new project requires me using Angular 7, so I took the step in using it. A problem I encountered is sharing data between two unrelated components and updating their HTMLs accordingly. So for this I built the following service:</p>
  
  <pre><code>import { FilterSet } from './../model/filterset.model';
  import { TimeData } from './../model/timedata.model';
  import { FetchDataService } from './fetchQualityData.service';
  import { ConfigService } from './config.service';
  import { Injectable } from '@angular/core';
  import { Observable, of } from 'rxjs';
  
  @Injectable()
  export class SidebarService {
    public qualityData;
    public configData;
    public filterSet: FilterSet;
    public filterColor;
    public filterModel;
    public timePeriodSelected;
    public timeData: TimeData;
  
    constructor(
      private _configService: ConfigService,
      private _qDataSerivce: FetchDataService
    ) {
      this.timeData = {
        chosenTimeAxis: 0,
        chosenTimePeriod: 2,
        chosenDataSet: 0,
        timePeriodEnd: '2017-03-27'
      };
      this.qualityData = null;
      this.filterSet = null;
      this.filterColor = null;
      this.filterModel = null;
      this.getConfig();
    }
  
    getFilterSet() {
      return this.filterSet;
    }
    getQualityData() {
      return this.qualityData;
    }
    getTimeData() {
      return this.timeData;
    }
    getFilterModel() {
      return this.filterModel;
    }
    getFilterColor() {
      return this.filterColor;
    }
  
    setFilterSet(data) {
      this.filterSet = data;
    }
    setQualityData(data) {
      this.qualityData = data;
    }
    setTimeData(data) {
      this.timeData = data;
    }
    setFilterModel(data) {
      this.filterModel = data;
    }
    setFilterColor(data) {
      this.filterColor = data;
    }
  
    getQData(endDate) {
      const startDate = this._qDataSerivce.calculateStartDate(
        this.timeData.chosenTimePeriod,
        this.timeData.timePeriodEnd
      );
      this._qDataSerivce
        .fetchData(
          this.configData.dataURL,
          this.configData.user,
          startDate,
          endDate
        )
        .subscribe((response: any) =&gt; {
          this.setQualityData(
            this._qDataSerivce.dataProcessingManageObjects(response)
          );
          this.setFilterSet(this._qDataSerivce.getFilters(this.getQualityData()));
        });
    }
  
    getConfig() {
      this._configService.fetchConfig().subscribe((data: any) =&gt; {
        this.configData = data;
        this.getQData(this.timeData.timePeriodEnd);
      });
    }
  
    receiveDataSet(data) {
      this.timeData.chosenDataSet = data;
    }
  
    receiveFilterSet(data) {
      console.log(this.filterColor);
      this.filterColor = this.filterSet.colors[data.color];
      this.filterModel = this.filterSet.models[data.model];
  
      if (data.color === 0) {
        this.filterColor = null;
      }
      if (data.model === 0) {
        this.filterModel = null;
      }
    }
  
    receiveTimeAxis(data) {
      this.timeData.chosenTimeAxis = data;
    }
  
    receiveTimePeriod(data) {
      this.timeData.chosenTimePeriod = data;
      const startDate = this._qDataSerivce.calculateStartDate(
        this.timeData.chosenTimePeriod,
        this.timeData.timePeriodEnd
      );
      this._qDataSerivce
        .fetchData(
          this.configData.dataURL,
          this.configData.user,
          startDate,
          this.timeData.timePeriodEnd
        )
        .subscribe((response: any) =&gt; {
          this.setQualityData(
            this._qDataSerivce.dataProcessingManageObjects(response)
          );
          this.setFilterSet(this._qDataSerivce.getFilters(this.getQualityData()));
        });
    }
  
    receiveTimePeriodEnd(endDate) {
      this.timeData.timePeriodEnd = endDate;
      this.getQData(endDate);
    }
  }
  </code></pre>
  
  <p>What I am trying to achieve with this service is, when I change something in a sidebar, the other components that use the data from this service (which they took by get) should be updated to reflect the changes in the sidebar. And right now after I receive new data from the server neither my sidebar elements or the other components elements are updating, the data inside them always stays null, as it was when the service was initialized. No matter if I set the <em>this.filterSet</em> for example with new data, the components won't update.</p>
  
  <p>Here is my sidebar component code</p>
  
  <pre><code>@Component({
    selector: 'app-sidebar',
    templateUrl: './sidebar.component.html',
    styleUrls: ['./sidebar.component.scss']
  })
  export class SidebarComponent implements OnInit, OnChanges {
    dataSetEvent;
    filterEvent;
    timeAxisEvent;
    timePeriodEvent;
    timePeriodEndEvent;
    filterSet: FilterSet;
    endOfTimePeriod = '2017-03-27';
    dataSets: Filter[];
    colors: Filter[];
    models: Filter[];
    timeAxis: Filter[];
    timePeriods: Filter[];
    colorSelected: Number;
    modelSelected: Number;
    dataSetSelected: Number;
    timeAxisSelected: Number;
    timePeriodSelected: Number;
    xAxisSwitchNotAvailable: Boolean;
  
    constructor(private sidebarService: SidebarService) {}
  
    ngOnInit() {
      // this.sidebarService
      //   .getFilterSet()
      //   .subscribe(filterSet =&gt; (this.filterSet = filterSet));
      this.filterSet = this.sidebarService.getFilterSet();
      this.xAxisSwitchNotAvailable = false;
  
      this.timePeriods = [
        // {
        // id: 0,
        // name: "Day"
        // },
        {
          id: 1,
          name: 'Week'
        },
        {
          id: 2,
          name: 'Month'
        },
        {
          id: 3,
          name: 'Year'
        }
      ];
      this.timePeriodSelected = 2;
  
      this.dataSets = [
        {
          id: 0,
          name: 'Quality Trend (Touch)'
        },
        {
          id: 1,
          name: 'Quality Trend (No-Touch)'
        }
      ];
      this.dataSetSelected = 0;
  
      this.timeAxis = [
        {
          id: 0,
          name: 'Date'
        },
        {
          id: 1,
          name: 'Weekdays'
        }
      ];
      this.timeAxisSelected = 0;
    }
  
    ngOnChanges() {
      if (this.filterSet != null) {
        this.colors = [];
        for (let i = 0; i &lt; this.filterSet.colors.length; i++) {
          this.colors.push({
            id: i,
            name: this.filterSet.colors[i]
          });
        }
  
        this.models = [];
        for (let i = 0; i &lt; this.filterSet.models.length; i++) {
          this.models.push({
            id: i,
            name: this.filterSet.models[i]
          });
        }
      } else {
        this.colors = [
          {
            id: 0,
            name: 'none'
          }
        ];
        this.colorSelected = 0;
  
        this.models = [
          {
            id: 0,
            name: 'none'
          }
        ];
        this.modelSelected = 0;
      }
    }
  
    onDataChange() {
      this.sidebarService.receiveDataSet(this.dataSetSelected);
    }
  
    onFilterChange() {
      const filterSetNo = {
        model: this.modelSelected,
        color: this.colorSelected
      };
      this.sidebarService.receiveFilterSet(filterSetNo);
    }
  
    onTimeAxisChange() {
      this.sidebarService.receiveTimeAxis(this.timeAxisSelected);
    }
  
    onTimePeriodChange() {
      if (this.timePeriodSelected === 3) {
        this.xAxisSwitchNotAvailable = true;
        this.timeAxisSelected = 0;
        this.sidebarService.receiveTimeAxis(this.timeAxisSelected);
      } else {
        this.xAxisSwitchNotAvailable = false;
      }
      this.sidebarService.receiveTimePeriod(this.timePeriodSelected);
    }
  
    updatePeriod() {
      this.sidebarService.receiveTimePeriodEnd(this.endOfTimePeriod);
    }
  </code></pre>
  
  <p>As you can see I get the <em>this.filterSet</em>, which is an object, by using the get function from the service. But after I get the initial value it stays the same in the sidebar component, no matter if I change it in the service.</p>
  
  <p>I tried using observables and returing of(data), and subscribing to this, but I had no success. I checked if I receive the data and if this.filterSet is set with the new data in the service, which it is (and was when I didn't use set functions and assigned the new data to it directly).</p>
  
  <p>What am I doing wrong?</p>