CODEWITHSUNDEEP
angulartypescriptprimeng
ilovejavaAJ
ilovejavaAJ

Reputation: 1831

Changing the value of primeng switch. Instead of a boolean values I want the values be set to 'N' or 'Y'

I used primeNg p-switch in my angular 2 project. The default values of primeNg input switch are set to boolean values. I want the the values of the input switch set to 'N' or 'Y' instead of true or false

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

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>

Upvotes: 0

Views: 12557

Answers (4)

Sargam Sanghani
Sargam Sanghani

Reputation: 147

Try this:

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

Upvotes: 0

Gherman
Gherman

Reputation: 7426

Remember, this code

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

is just the syntactic sugar to write this:

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

Output from the bidirectional input is always made with the event with the Change suffix and $event as the value being assigned. Here $event is boolean.

Considering this you can use p-inputSwitch like that:

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

Though, I am not sure if it's a good idea to use string instead of normal booleans.

Upvotes: 2

anoop
anoop

Reputation: 3822

Since PrimeNG inputSwitch does only bind as boolean, So you need to have a change event function and bind your string value to new property.

You can do it with (ngModelChange) or by (onChange)="handleChange($event)" mentioned on there website.

See this working plunker.

updated plunker for DataTable module. : link

Upvotes: 0

sainu
sainu

Reputation: 2701

You can customise primeNg, like below example

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

change model decleration as:

booleanString: boolean = true;

Please read the documentation carefully

Upvotes: 0

Related Questions