Angular11 PrimeNG multiselect how to slice the longer option label

user_4717427 0
Viewed 664

I am using PrimeNG multiselect with Angular 11. One of the option label has got longer text. I would like to slice the label if it is more than certain length. Can anyone help me how to achieve this?

The options is

@Input() options: ISelectOption<number, string>[];

<p-multiSelect
    #multiSelect
    [options]="options"
    [(ngModel)]="values"
    optionLabel="name"
    dropdownIcon="fas fa-caret-down"
    (onChange)="onValueChange()"
    [placeholder]="placeholderText"
    display="chip"
    [optionValue]="_config?.optionValue"
    [disabled]="disabled || readonly"
></p-multiSelect>
angular11 primeng
1 Answers

I think you would have two solutions:

  1. loop on the options in onInit and check if the length of options exceeds the max length slice part of it and show for instance 100 characters of it

  2. set a CSS style for the multi-select component

    .p-multiselect .p-multiselect-panel { min-width: auto; max-width: 278px; }

user_95232740
Related