reza reza - 2 years ago 47
AngularJS Question

ng-disable button function never getting called

I see a lot of questions that look like duplicates to this but I am not seeing what I need from them.

So I have an angular component:

providers: [
selector: 'flowsheet',
templateUrl: './flowsheet.component.html',
styleUrls: ['i-o-renderer.css'],
encapsulation: ViewEncapsulation.None

it implements a public function that returns boolean.

public ableToRetrieveHistoricalData() {
return true;

the above function never gets called but the button click function gets called.

the HML page is:

<div style="height: 10%; padding: 10px;">
<span style="padding-left: 50px;">
<button (click)="retrieveHistoricalData()" ng-disabled="ableToRetrieveHistoricalData()"> << Previous</button>


anything obvious I am missing?

Answer Source

if you using Angular2+ , use [disabled] instead of ng-disabled.

<button (click)="retrieveHistoricalData()" 
[disabled]="ableToRetrieveHistoricalData()"> << Previous</button>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download