How does change detection work in relation to services?

Hello.
I am updating a public boolean public isConnectedToDevice: boolean = false; inside a service like this:

this.isConnectedToDevice = true;

I want this change to propagate to the views of the components where i have injected the service. Example:

<button>
  <ion-icon id="bleicon" name="bluetooth" 
      [class.connected]="bleService.isConnectedToDevice"
      [class.disconnected]="!bleService.isConnectedToDevice"
      (click)="bleService.disconnect()"
      class="connected">
  </ion-icon>
</button>

The change is propagated but not instantly. My guess is that there is something else triggering changeDetection in the component which will also update the template elements dependent on isConnectedToDevice?

What would really appreciate some clarification on how services and components are connected in regards to change detection.
Best, Gunnar!