CODEWITHSUNDEEP
angularprimeng
anais1477
anais1477

Reputation: 496

PrimeNG p-chips delete only

I'm using p-chips of primeNG with Angular 2. https://www.primefaces.org/primeng/#/chips

My p-chips is filled when selecting value of a multi-select list. I would like to disable the addition of data by writing in the p-chips.

But I want to keep the possibility of deleting values.

Is it possible ? Otherwise do you know any other tool which can do this ?

Upvotes: 1

Views: 3369

Answers (2)

Andriy
Andriy

Reputation: 15442

you can achieve it using CSS:

/* +++++++ Prime NG CHIPS +++++++ */
.ui-chips > ul.ui-inputtext,
.ui-chips > ul.ui-inputtext:focus {
  border: none;
  box-shadow: none;
  background: none;
}
.ui-chips .ui-chips-input-token {
  display: none;
}

or SCSS:

/* +++++++ Prime NG CHIPS +++++++ */
.ui-chips {
  > ul.ui-inputtext,
  > ul.ui-inputtext:focus {
    border: none;
    box-shadow: none;
    background: none;
  }
  .ui-chips-input-token {
    display: none;
  }
}

please note, that these CSS rules should be added to some global (uncapsulated) CSS/SCSS file

stackblitz: https://stackblitz.com/edit/angular-mugxwj?file=styles.css

2022 UPDATE I did not check primeng for a while, but I see you can achieve the same by using max property:

<p-chips [max]="values?.length || 0" [(ngModel)]="values" ></p-chips>

keep in mind that when max is 0, you can add one chip, if this is not desired, consider disabling p-chip with disabled property

Upvotes: 2

BillF
BillF

Reputation: 864

No built in way to do this. You could probably add a delete-only property to the component to make it function the way you want.

Upvotes: 0

Related Questions