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

Is there a lack of compile checking for generics in Typescript?

"Running into Memory Limitations: Resolving System.OutOfMemoryException in ASP.NET Web API Integrated with Angular

What is the cause of the error message "property 'map' is undefined"?

What is the best method for incorporating multiple collections in the get() function?

Is it possible to modify the parameters of a function by utilizing a MethodDecorator without affecting the "this" value?

What is the method to assert that two arguments are equal within a function?

The test.ts file does not contain any type definitions

Angular 4's Mddialog experiencing intermittent display problem

How can I modify the ngx-datatable pager component to display text instead of icons and include a totalVisible property?

Inability to assign a value to an @input within an Angular project

Generate a TypeScript generic function that maps class member types to class types

Angular Error: The first argument has a property that contains NaN

Sending various arguments within a single post request in Angular 6 and Node.js

What is the source of the compiler options in tsconfig.json?

Creating personalized functions in Object.prototype using TypeScript

Embracing Typescript version 2.7 and above allows for utilizing multiple types within a parameter, enabling developers to efficiently handle specific properties

Implementing TypeScript with react-router-dom v6 and using withRouter for class components

NextAuth credentials are undefined and authentication is malfunctioning in React

Unable to apply "@angular/fire" using ng add command because the package does not have schematic support

Transforming Angular 4's folder structure for improved architecture simplicity