How to set a button state using a control setting

[Reza Razavipour]

I have an angular component with a button in its html file.

I want to set this button sensitive only after a condition changes to true in the component.

I am seeing ng-if .

Any samples on how to do this?

[Sander Elias]

Hi Reza,

ngIf will take the button out when it's condition is not met. That's probably not what you want to do. Most of the time, disabling it is the right thing to do.

<button ng-disabled="!$ctrl.SomeCondition">Button</button>

If you really need to make the button go away, replace the ngDisabled with ngIf

Regards

Sander

[Reza]

Not at the machine to test :( 

--
You received this message because you are subscribed to a topic in the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/PB8mtFCVxKs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Reza]

And the ng disabled does the toggling as the condition result 

Changes. Is that correct?

On May 19, 2017, at 8:52 PM, Sander Elias <sande...@gmail.com> wrote:

--

[Reza Razavipour]

Ok, so I am not clear what I am doing incorrectly but my test for enable/disable of the button is not being called, whether my expression is a variable or a method.

my component.component.html is:

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

this html is used by flowsheet.component.ts.

@Component({
 providers: [
 FlowsheetService,
 SubscriptionService
 ],
 moduleId: module.id,
 selector: 'flowsheet',
 templateUrl: './flowsheet.component.html',
 styleUrls: ['i-o-renderer.css'],
 encapsulation: ViewEncapsulation.None
})

the button click works just fine but the ableToRetrieveHistoricalData() function is never called.

Am I missing something obvious?

[Reza Razavipour]

I had to use [disabled] instead of ng-disabled.

[Sander Elias]

Glad you figured it out  :)