Primeng: Primeng- Input switch onLabel OffLabel is gone now do u guys have any other suggestion

[anoopchandranms]

Hello There,
I was using the old primeng p-input switch i was able to add an onLabel and OffLabel and the labels were working properly in the input switch button but after the upgrade of angular to 6.1.4 its not working due to security issues.

Error

Uncaught Error: Template parse errors:
Binding to event property 'onLabel' is disallowed for security reasons, please use (Label)=...
If 'onLabel' is a directive input, make sure the directive is imported by the current module. ("
[(ngModel)]="val"></p-toggleButton> -->

<p-inputSwitch class="dateinputSwitch" [ERROR ->]onLabel="{{onLabel}}"  offLabel="{{offLabel}}" (onChange)="handleChange($event)"   [(ngModel)]="check"): ng:///CommonDeclrationsModule/FormDatepickerComponent.html@12:39
Can't bind to 'onLabel' since it isn't a known property of 'p-inputSwitch'.
1. If 'p-inputSwitch' is an Angular component and it has 'onLabel' input, then verify that it is part of this module.
2. If 'p-inputSwitch' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
[(ngModel)]="val"></p-toggleButton> -->

<p-inputSwitch class="dateinputSwitch" [ERROR ->]onLabel="{{onLabel}}"  offLabel="{{offLabel}}" (onChange)="handleChange($event)"   [(ngModel)]="check"): ng:///CommonDeclrationsModule/FormDatepickerComponent.html@12:39
Can't bind to 'offLabel' since it isn't a known property of 'p-inputSwitch'.
1. If 'p-inputSwitch' is an Angular component and it has 'offLabel' input, then verify that it is part of this module.
2. If 'p-inputSwitch' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("odel)]="val"></p-toggleButton> -->

         So do you guys have any option to add a label to the p-input switch? My code is like this

<p-inputSwitch class="dateinputSwitch" onLabel="{{onLabel}}" offLabel="{{offLabel}}" (onChange)="handleChange($event)" [(ngModel)]="checked">

and the output will be an input switch with on and off labels are written on the switch. Can You guys give me a proper description of how I can achieve this

Thanks in advance

[yigitfindikli]

Please use forum for support. And input Switch haven't a onLabel or offLabel property, you can try toggle button. If you want a more information you can look https://www.primefaces.org/primeng/#/togglebutton , https://www.primefaces.org/primeng/#/inputswitch

[markleppke]

For accessibility purposes input switches should have an associated text label

https://www.nngroup.com/articles/toggle-switch-guidelines/

"Additionally, state descriptors — the words On and Off next to the toggle — can provide clear visibility of the system status."

For people who may be color blind, color alone is not enough.

[KarimovDev]

Hi!

If you have to do a clickable label, for your inputswitcher, you can do something like this:
.ui-inputswitch { width: 180px; height: 40px; cursor: pointer; }
.ui-inputswitch .ui-inputswitch-slider { width: 42px; height: 24.5px; top: 50%; transform: translateY(-50%); }

And for label just set margin-left: -130px;
This code works if your label placed on right.

Hope It'll be helpful.