Angular 2: [ngclass] and [disabled] not updating dynamically

Question

I'm using these angular versions:

@angular/animations: 4.4.6
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4

And I have this problem, I have a button like this:

<button 
    [disabled]="submitted || !form.valid" 
    class="btn btn-block btn-hero-success"
    [ngClass]="{'btn-pulse': submitted}">
          Sign In
</button>

And my problem is when I update the variable submitted on the controller, it doesn't get updated on the template unless I click one input.

This is a small summary of my current controller:

export class NbLoginComponent {
  errors: string[] = [];
  messages: string[] = [];
  user: any = {};
  submitted: boolean = false;
  @ViewChild('form') form;

  constructor(protected service: NbAuthService,
              @Inject(NB_AUTH_OPTIONS_TOKEN) protected config = {},
              protected router: Router) {
   ....
   ....
  }

  login(): void {
    this.errors = this.messages = [];
    this.submitted = true;

    this.service.authenticate(this.provider, this.user).subscribe((result: NbAuthResult) => {
      this.submitted = false; // <-- I updated submitted variable here
      ...
    });
  }

}

I'm customizing nebular package authentication but the problem it is with some lack of understanding from my part of Angular 2.

My questions are:

• Why the variable submitted is not updated on the template as soon as I change it on the controller ?

• Why the variable gets updated if I make click on any form input ?

When I try to login, until the response is back, the button gets disabled and also a class is added so the button "blinks".

The problem is that neither the class nor the disabled property gets updated because the variable submitted only gets updated if I click on any input form and then outisde the input

I need to know if I'm linking the variables in a wrong way, or I need to trigger something similar to $scope.apply.

I tried to use ApplicationRef.tick() after the variable submitted it's updated but nothing happened

Answer 1

I solved the issue adding this 3 lines to my code:

// Import ChangeDetectorRef
import { ChangeDetectorRef } from '@angular/core';

// Add ChangeDetectorRef to constructor
constructor(private cd: ChangeDetectorRef) {}

// Call markForCheck at the end of the subscribe function
this.cd.markForCheck();

My component ended like

import { ChangeDetectorRef } from '@angular/core';  // <---

export class NbLoginComponent {
  errors: string[] = [];
  messages: string[] = [];
  user: any = {};
  submitted: boolean = false;
  @ViewChild('form') form;

  constructor(
       private cd: ChangeDetectorRef, // <-----
       protected service: NbAuthService,
       @Inject(NB_AUTH_OPTIONS_TOKEN) protected config = {},
      protected router: Router) {
   ....
   ....
  }

  login(): void {
    this.errors = this.messages = [];
    this.submitted = true;

    this.service.authenticate(this.provider, this.user).subscribe((result: NbAuthResult) => {
      this.submitted = false;
      this.cd.markForCheck(); // <----
    });
  }

}

After calling this.cd.markForCheck(); at the end of the subscribe method, the HTML is updated correctly