interpolation in Angular 2 not working

I'm using Plot.ly in Angular 2 to create a heatmap plot. I want the "view extents" (the endpoints of the x-axis in the plot) to show up in the DOM via interpolation whenever I change the axis' visible range in the layout of the plot via zooming. The interpolation refuses to update despite attempting to force change detection via ChangeDetectorRef and NgZone.

<div class="row">
  <div class="card blue-grey darken-1">
    <div class="card-content white-text">
      <span class="card-title">2D View</span>

      <!-- These aren't updating -->
      {{sliceIndexStart}} - {{sliceIndexEnd}}

      <div #plotly id="plotly" name="plotly" style="width: 100%; height: 600px;">
        <!-- Plotly chart will be drawn inside this DIV -->
      </div>
    </div>
  </div>
</div>

And my Component class looks like this:

/* Imports and declarations */
...


@Component({
  selector: 'app-two-d-view',
  templateUrl: './two-d-view.component.html',
  styleUrls: [ './two-d-view.component.scss' ],
  providers: [ H5servTestService ]
})
export class TwoDViewComponent implements OnInit {
  @Input() data: any;
  @Input() layout: any;
  @Input() options: any;
  @Input() displayRawData: boolean;
  @ViewChild('plotly') private plotly: ElementRef;

  private sliceIndexStart: number;
  private sliceIndexEnd: number;

  constructor(private dataService: H5servTestService) {
    this.sliceIndexStart = 1000;
    this.sliceIndexEnd = 2000;
  }

  ngOnInit() {
    this.dataService.getData().subscribe(
      res => {
        /* Get data and specify layout/options */
        ...

        Plotly.newPlot('plotly', this.data, this.layout, this.options);
        this.plotly.nativeElement.on('plotly_relayout', data => {
          if (data[ 'xaxis.range[0]' ] && data[ 'xaxis.range[1]' ]) {
            /* Why isn't this updating the view??? */
            this.sliceIndexStart = <number>data[ 'xaxis.range[0]' ];
            this.sliceIndexEnd = <number>data[ 'xaxis.range[1]' ];
          }
        });
      },
      err => {
        toast(err);
      }
    );
  }
}

I'm handling the relayout event of the plotly plot and if I toast the variables out, they are indeed updating in the component. But the interpolation in the view template is not updating...

Question

Why doesn't updating a component's instance properties percolate up to the view where I'm using interpolation to display those values?

My thoughts so far:

• I'm really getting hung up on the fact that where I'm updating the view model is in a handler for the subscription I'm making on the nativeElement of the @ViewChild (this.plotly.nativeElement.on('plotly_relayout', ...)).
  • I don't know much about it yet, but does this put me in a different zone than the default one my change detection is running on?
  • Am I actually making changes to the object I think I am? If not, how can I make the changes to the right object that will trigger a change in the view template?

Even if you have to correct my wording, any and all feedback is welcome.