CODEWITHSUNDEEP
angularangular7primeng
Mukil Deepthi
Mukil Deepthi

Reputation: 6452

Primeng multiselect display selected values separated by special character than the default comma

I am using primeng with angular 7. By default the multiselect component displays the selected value separated by comma. i need this to display values separated by #.

        <p-multiSelect formControlName="selectedLayers"
                       [options]="layerList"
                       [id]="'selectedLayers'"
                       [selectedItemsLabel]="'{0} layers selected'">
        </p-multiSelect>

        ngOnInit(): void {
            this.groupLayerForm = this.formBuilder.group({
            selectedLayers: [[], [
                ArrayValidator.minLengthArray(1)
            ]]
        }

Upvotes: 3

Views: 7135

Answers (1)

Daniel Pi&#241;eiro
Daniel Pi&#241;eiro

Reputation: 3149

You can use the templating options that primeng multiSelect has with pTemplate="selectedItems":

   <p-multiSelect formControlName="selectedLayers"
                       [options]="layerList"
                       [id]="'selectedLayers'"
                       [selectedItemsLabel]="'{0} layers selected'">
            <ng-template let-selectedLayers pTemplate="selectedItems">
               <ng-container *ngFor="let selectedLayer of selectedLayers;">{{selectedLayer}}#
               </ng-container>
            </ng-template>
        </p-multiSelect>

More info in the oficial primeng page in the Templating section: https://www.primefaces.org/primeng/#/multiselect

Upvotes: 3

Related Questions