I have a variable in my Component that it is updating while using console.log(variable) although it is not updating in my View using {{ variable }} I have tried several things, my last option was to use Observers and still not working as it should.

I'll explain my code:

So I have a Service, a Base Component, an App Component & another Component

My Base Component doesn't have any view. It only instantiates services. just like so:

  private _communicationService: CommunicationService;
  private _clientService: ClientService;

  constructor(private injector : Injector) {
    this.clientService = this.injector.get(ClientService);
  }

(Includes gets and setters)

My App Component and the other one, extends BaseComponent

What I think it's wrong in my implementation is the next thing:

My App Component is calling window functions that I tried to implement on my ngInit

export class AppComponent extends BaseComponent implements OnInit{  
  constructor(injector : Injector) {
    super(injector);
  }

  ngOnInit(): void {
    window.FlashExternalInterface.logLoginStep = (step : string) => {
      this.clientService.loadClientProgress(step);
    }
  }
}

My "other" component:

export class LoaderComponent extends BaseComponent implements OnInit {
  public progress = 0;

  constructor(injector : Injector) {
    super(injector);
  }

  ngOnInit(): void {
    this.clientService.clientProgress.subscribe(data => {
      console.log("Data Changing?: " + data);
      this.progress = data;
      console.log("Progress changing??" + this.progress);
    });
  }
}

My progress variable does change in F12 Console, but doesn't in the View.

I have tried using {{ this.progress }} AND without this. or even calling direct service instance from Base Component clientService.clientProgress.getValue()

I mean, the window function it's giving me an error in console like:

ERROR TypeError: Cannot set property 'logLoginStep' of undefined.

But still, the variable does change in console. Console Variables