reza reza - 1 year ago 33
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:

@Component({
providers: [
FlowsheetService,
SubscriptionService
],
moduleId: module.id,
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>
<div style="height: 10%; padding: 10px;">
<span style="padding-left: 50px;">
<button (click)="retrieveHistoricalData()" ng-disabled="ableToRetrieveHistoricalData()"> << Previous</button>
</span>
</div>

</div>


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