CODEWITHSUNDEEP
angulartypescriptviewcastingangular9
Rodolfo Contreras
Rodolfo Contreras

Reputation: 115

Angular 9 Variable not updating in View

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

Upvotes: 10

Views: 12643

Answers (1)

nate-kumar
nate-kumar

Reputation: 1771

This is probably an asynchronous issue, as progress is assigned a value within a subscribe() call. Prior to the data coming back from the client service, progress will not have been updated.

The reason your console.log is working is because it is within your subscribe() block therefore it is by definition waiting for the service to return the value before logging to the console. Your HTML however is instructed to render the current value of progress as soon as the page has loaded. Even though your subscribe() is called within ngOnInit(), it still takes a non-zero amount of time for the service to return the updated value, which is already too late.

There are a couple of ways to handle this in your HTML

async pipe

<p>{{ progress | async }}<p>

This will watch the progress variable for updates and render the changes to the DOM directly once the value has updated; effectively the same as what .subscribe() does in your .ts file

*ngIf

<p *ngIf="progress">{{ progress }}</p>

This will not render the <p> at all until the progress variable is truthy, i.e. in this case not 0, null or undefined

Upvotes: 0

Related Questions