How to dynamically update linear gauge value

[n/a]

I have a linear gauge

<div style="width:100%;">
  <kendo-lineargauge #myGauge="kendoLinearGauge" style="width:100%"  [scale]="{ vertical: false,max: 100 }" [pointer]="{ value: progressValue }">
  </kendo-lineargauge>
</div>

I update it from signal r.

this._connection.on('taskProgressChanged', data => {
  console.log(data);
  this.progressValue = Number(data);
  this.myGauge.resize();

  var myPointer : any = this.myGauge.pointer;
  myPointer.value = data;
  this.messages.push(data);
});

 

In a component that has these configurations

public progressValue = 0;
@ViewChild(LinearGaugeComponent, { static: false })
public myGauge: LinearGaugeComponent;

However,
1.  the gauge does not update with the value dynamically unless, I click on the gauge.  How do I update the gauge dynamically?
2.  the gauge does not resize to 100% of the width until the resize method is called.  How do I default the width of the gauge to 100%?

 

[n/a]

I was able to force it to refresh using ChangeDetectorRef approach found here https://stackoverflow.com/questions/35105374/how-to-force-a-components-re-rendering-in-angular-2.