Hi, How do I change the text of this modal if user checks or unchecks the checkbox?

[primal tusk]

Is it just me, or the checkbox looks checked but disabled?

[stable plinth]

oh! it's disabled!

you are not blind

[primal tusk]

That means bulkCompanyService.selectedCompaniesCount is false, so the span shown is correct.

[stable plinth]

so if i enabled that checkbox

and the user toggles it off, i should be able to see the other text copy

but i am unable to

[primal tusk]

It's not that you have to enable the checkbox.
checkbox' disbled and the other span you want are boundto the same model property.
If you wanna show that span, that property has to turn to true.
As a side effect the checkbox will be enabled.
It's up to you if that's accepted behaviour or not.

[stable plinth]

i am hoping to show the span when user checks the checkbox

how can i build that?

[primal tusk]

Bound the span to the same property you used for binding the checkbox value: bulkCompanyService.allFutureCompanies

Please read again my message.

[stable plinth]

the spans are bounded

[primal tusk]

Please, don't change your code random.
Now you've bound those two span to the same property, and not alternatively.

And that property is still not the one that I suggested to you.

[stable plinth]

🤦

you are binding the (ngModel)] value

gotcha

let me give that a try

[primal tusk]

This is what I was tryin to tell you

<p *ngIf="hasAutomationRulesEnhancements; else savingAutomationRules"> 
          Saving this rule will apply to selected companies
          <span *ngIf="bulkCompanyService.allFutureCompanies"> and all future companies</span>
          <span *ngIf="!bulkCompanyService.allFutureCompanies">and will not apply to future companies</span>.
          <ui-checkbox
            class="u-margin-top-20 u-block"
            [(ngModel)]="bulkCompanyService.allFutureCompanies"
            [disabled]="!bulkCompanyService.selectedCompaniesCount">
            Apply to all future companies
          </ui-checkbox>
        </p>

But sincerely, this way of learning is kinda pointless.
You should follow official docs to get the basics of Angular.

g!toh @stable plinth

[plain basalt]

Hi @stable plinth, welcome to

We recommend you start your Angular journey with the Tour of Heroes tutorial, located here: https://angular.io/tutorial.

[primal tusk]

Copy and paste the code you're using now.

[stable plinth]

morning

[primal tusk]

If the flag is actually checked, why it should display the "not apply" span?

[stable plinth]

i want to allow the user to toggle on and off that checkbox

if it's checked, then do not display the not apply span

if it's not checked, displayed the not apply span

[primal tusk]

And that's exactly what is shown in your screenshot: checkbox flagged and "not apply" NOT displayed.

[stable plinth]

how can user toggle off the checkbox if it's disabled?

would like to leave that option for the user

[primal tusk]

The checked state and the value of the checkbox are bound to two different properties.
I can't see your code, but judging by its name bulkCompanyService.selectedCompaniesCount should be a number, so considering you bound disabled state to its negative, that means the checkbox will be disabled whenever that number is 0.