CODEWITHSUNDEEP
angular
Rousblack
Rousblack

Reputation: 55

*NgIf for showing a dropdown

How can I use *Ngif to show a dropdown and hide another one. using the input of a checkbox.

So if checkbox is true show this else show that.

<div class="test">
    <div class="test1">
        <div class="test-header">
            test
        </div>
        <div class="test-block">
            <app-select
                (selectConnection)="onSelectConnection($event)"
                (selectPeriod)="onSelectPeriod($event)"
                (selectUtilityType)="onSelectUtilityType($event)"
                (selectTime)="onSelectTime($event)"
                [timeSelection]="true"
                [utilityTypeSelection]="true"
                [allowTimeToggle]="true"
                [allowAll]="true"
                [periodSelection]="true"
                [allowTableToggle]="false"
                [intervalSelection]="false"
                [parentIsLoading]="loading"
            ></app-select>
        </div>
    </div>
</div>

ToggleTime is a boolean for the checkbox

So something like this

*Ngif="ToggleTime(is true)"

Show:

[timeSelection]="true" 
[periodSelection]="false"

And the rest.

if not

*Ngif="!ToggleTime"
[timeSelection]="false"
[periodSelection]="true"

And the rest.

Upvotes: 1

Views: 593

Answers (3)

Cyril
Cyril

Reputation: 254

You can do this :

[timeSelection]="ToggleTime" 
[periodSelection]="!ToggleTime"

Upvotes: 0

Igor
Igor

Reputation: 62213

Use the value that the checkbox is bound to directly. Assuming that is ToggleTime:

[timeSelection]="ToggleTime" 
[periodSelection]="!ToggleTime"

Upvotes: 0

Reza Torkaman Ahmadi
Reza Torkaman Ahmadi

Reputation: 3038

you can do it like this:

[timeSelection]="ToggleTime? true:false" 
[periodSelection]="ToggleTime? false:true"

or much simpler:

[timeSelection]="ToggleTime" 
[periodSelection]="!ToggleTime"

(use second approach, but the first one is worth to know and will be useful later)

Upvotes: 1

Related Questions