COBI.Bike integration with Angular

[divid3byzero]

Hello,

I would like to use Angular for development with the COBI.Bike DevKit. As per documentation this is possible but I have not managed to get any real time data. What I've done is the following:

- Included COBI.js in index.html via script tag.
- Declare COBI as a variable and include via custom type definition
- I want to wrap the COBI API inside an Angular service later but for now I've initialized COBI using COBI.init('token') inside the Angular component and subscribed to COBI.rideService.speed and wanted to update the according variable in the template.

What happens is that there is no real time data as in the examples. The current speed data only get's displayed when I reload the browser, and this actually only works sometimes. I've already tried to initialize COBI in an Angular app initializer to be sure that COBI is definetly initialized before accessing the API. That also does not change the described behaviour.

I have already seen that all the example applications use plain JavaScript. Is this really the only way to use COBI.js?

[dfarache-ebike · Accepted solution]

Hello,

That's great. You almost have it.

The reason why the UI is not getting updated is because the scope changes inside of a callback method and the digest method is not being called. You can read more about it here.

Luckily, Angular offers several methods to force a scope update. I have tried the following in your Component class and it works as expected. Let me know what you think.

import {Component, OnInit, ChangeDetectorRef} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  public calories: number;

  constructor(private cd: ChangeDetectorRef) {}

  ngOnInit(): void {
    COBI.tourService.calories.subscribe(calories => {
      this.calories = calories;
      this.cd.detectChanges();
    });
  }

  public displayCalories(): void {

  }
}

Best regards,