CODEWITHSUNDEEP
htmlcssangularprimengangular7
User
User

Reputation: 383

How to display unchecked element of primeNg inputSwitch?

In PrimeNg documentation I can see style class as ui-inputswitch-checked but it is not having any class for unchecked element. Here, based on my fileStatus value I need to display active and inactive inputSwitch. I can able to show active switch but I cannot able to show the inactive switch based on filestatus. How can I achieve this? Thanks in advance.

<p-inputSwitch [ngClass]="(doc.fileStatus === 'ACTIVE')?'ui-inputswitch-checked':'ui-inputswitch-unchecked'" (onChange)="activeInactive(doc)" [(ngModel)]="doc.fileStatus">
</p-inputSwitch>

Upvotes: 1

Views: 1522

Answers (1)

Zarna Borda
Zarna Borda

Reputation: 735

For inputswitch its toggling class. If active then ui-inputswitch-checked class added.

<p-inputSwitch [ngClass]="(doc.fileStatus === 'ACTIVE')?'ui-inputswitch-checked':''" (onChange)="activeInactive(doc)" [(ngModel)]="doc.fileStatus">

If you want to style input switch for the active and inactive state then use below class for active and inactive state

For inactive state

.ui-inputswitch.ui-widget {
}

For active state 

.ui-inputswitch.ui-widget.ui-inputswitch-checked {
}

Upvotes: 1

Related Questions