I would like to customize the Primeng switch by changing the values from boolean to 'N' or 'Y'

Question

I would like to customize the Primeng switch by changing the values from boolean to 'N' or 'Y'

I integrated the primeNg p-switch component into my Angular 2 project. By default, the input switch's values are boolean. However, I would like to have the values set to 'N' or 'Y' instead of true or false.

@export class MyComponent{ 
         persons: Person[] = [{'name':'Marvin','legalAge': 'Y'}, {'name':'Carla','legalAge': 'N'} ] }

Here is an example implementation in the HTML template:

<p-dataTable [value]="persons">
    <p-column field="name" header="Name"></p-column>
    <p-column field="legalAge" [sortable]="true" header="is Legal Age?">
        <template let-l="rowData" pTemplate>
                <p-inputSwitch [(ngModel)]="l"></p-inputSwitch> 
        </template>
    </p-column>
</p-dataTable>

angular typescript primeng

Answer 1

Answer №1

Keep in mind, this particular code snippet

<my-stuff [(foo)]="bar"></my-stuff>

is essentially just a more concise way of writing the following:

 <my-stuff [foo]="bar" (fooChange)="bar = $event"></my-stuff>

Whenever there's a bidirectional input involved, the output is always dictated by using the event with the Change label and $event as the assigned value. In this case, $event is boolean.

Keeping this in mind, you can utilize the p-inputSwitch component like so:

<p-inputSwitch
  [ngModel]="myProp === 'Y'"
  (ngModelChange)="myProp = $event ? 'Y' : 'N'"
></p-inputSwitch>

However, it might be something worth considering whether using strings instead of regular booleans is the best approach.

Answer 2

Keep in mind, this particular code snippet

<my-stuff [(foo)]="bar"></my-stuff>

is essentially just a more concise way of writing the following:

 <my-stuff [foo]="bar" (fooChange)="bar = $event"></my-stuff>

Whenever there's a bidirectional input involved, the output is always dictated by using the event with the Change label and $event as the assigned value. In this case, $event is boolean.

Keeping this in mind, you can utilize the p-inputSwitch component like so:

<p-inputSwitch
  [ngModel]="myProp === 'Y'"
  (ngModelChange)="myProp = $event ? 'Y' : 'N'"
></p-inputSwitch>

However, it might be something worth considering whether using strings instead of regular booleans is the best approach.

Answer 3

Answer №2

One way to personalize primeNg is shown in the following example

<p-inputSwitch onLabel="Yes" offLabel="No" [(ngModel)]="booleanString"></p-inputSwitch>

Update the model declaration to:

booleanString: boolean = true;

Make sure to thoroughly review the documentation

Answer 4

One way to personalize primeNg is shown in the following example

<p-inputSwitch onLabel="Yes" offLabel="No" [(ngModel)]="booleanString"></p-inputSwitch>

Update the model declaration to:

booleanString: boolean = true;

Make sure to thoroughly review the documentation

Answer 5

Answer №3

Because PrimeNG inputSwitch only binds as a boolean, you must create a change event function and bind your value as a string to a new property.

You can achieve this using (ngModelChange) or by using

(onChange)="handleChange($event)"

as mentioned on their website.

Here is a working example on plunker.

Check out the updated plunker for the DataTable module: link

Answer 6

Because PrimeNG inputSwitch only binds as a boolean, you must create a change event function and bind your value as a string to a new property.

You can achieve this using (ngModelChange) or by using

(onChange)="handleChange($event)"

as mentioned on their website.

Here is a working example on plunker.

Check out the updated plunker for the DataTable module: link

Answer 7

Answer №4

Give this a shot:

 <p-inputSwitch [(ngModel)]="l" [trueValue]="'Y'" [falseValue]="'N'"></p-inputSwitch>

Answer 8

Give this a shot:

 <p-inputSwitch [(ngModel)]="l" [trueValue]="'Y'" [falseValue]="'N'"></p-inputSwitch>

I would like to customize the Primeng switch by changing the values from boolean to 'N' or 'Y'

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Encountering the following error message: "Received error: `../node_modules/electron/index.js:1:0 Module not found: Can't resolve 'fs'` while integrating next.js with electron template."

What are the reasons behind the unforeseen outcomes when transferring cookie logic into a function?

The pre-line white-space property is not functioning as anticipated in my CSS code

When trying to console log a selected date, the output displays as undefined

Retrieve user details from a NextJS application following a successful Keycloak authentication on a Kubernetes cluster

Unit Testing in Vue.JS: The original function remains active even after using sinon.stub()

Tips on setting the first root element to automatically expand in a tree component

Improve Observable to prevent type assertion errors

When triggering the event: Was anticipating a spy, however received a Function instead

"Angular encountered an error while attempting to access the property 'data' from an undefined

Setting up TypeScript in Node.js

What is the method for activating a validation of a child component from a parent component during the submission process in Angular 4

The Angular variable binding issue persists upon reloading the page or browser, yet functions seamlessly when navigating between routes

Remove the unnecessary space at the bottom of the Mat Dialog

Error encountered while attempting to resume activity: TypeError - the function `callResume` is not defined in NativeScript Angular 2

Announce enhancements to a Typescript library

Developing personalized modules in Angular version 6

When attempting to pass an array of objects to a child component, TypeScript raises an error regarding types

I will evaluate two arrays of objects based on two distinct keys and then create a nested object that includes both parent and child elements

What causes the return value of keyof to vary in this particular case?