CODEWITHSUNDEEP
angularmulti-selectprimeng
Pragati Basa
Pragati Basa

Reputation: 83

p-multiSelect change label in the drop down

Im trying to add some custom html text for each drop down label using multiselect of primeng.

Like for example in the below image, I need to add a small rectangular span displaying color before the label options of read and write.

enter image description here

Tried this below function, but it updates the default label and selectedItemsLabel instead of the drop down labels

  this.multi.updateLabel = function () {
  console.log(this);
  var label = this.value.length.toString()+ "P";
  this.valuesAsString = label;
}

Someone please help with this. Im very to new to using angular and primeng, any tricks or reference links would be great help.

Thanks in advance.

Upvotes: 0

Views: 8840

Answers (2)

Lucas Lombardi
Lucas Lombardi

Reputation: 129

I know that is old, but i found this trying to find a solution to change p-multiSelect's label font-weight. I noticed that my 'label' in styles.scss was affecting my p-multiSelect label and no matter what i had changed in the specific scss or style, did not changed. My co-worker gave me a tip about ::ng-deep (I didn't know), and it solved! (I don't know exactly if it is the best solution)

::ng-deep p-multiSelect label {
  font-weight: normal !important;
}

Upvotes: 1

Nehal
Nehal

Reputation: 13307

p-multiSelect option labels are data-bound. You can check examples here.

If you want to add more text to labels, they need to be added in the label property of the objects for the array bound to p-multiSelect options.

Example:

ts:

import { Component, OnInit, EventEmitter, Pipe, ChangeDetectorRef, Input } from "@angular/core";
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'input-overview-example',
  templateUrl: 'input-overview-example.html',
  styleUrls:['input-overview-example.css']
})
export class InputOverviewExample {

  cars: SelectItem[];

  selectedCars: string[] = [];

  constructor() {
        this.cars = [];
        this.cars.push({label: 'Custom Label 1 Audi', value: 'Audi'});
        this.cars.push({label: 'Custom Label 2 BMW', value: 'BMW'});
        this.cars.push({label: 'Custom Label 3 Fiat', value: 'Fiat'});
        this.cars.push({label: 'Custom Label 4 Ford', value: 'Ford'});
        this.cars.push({label: 'Honda', value: 'Honda'});
        this.cars.push({label: 'Jaguar', value: 'Jaguar'});
        this.cars.push({label: 'Mercedes', value: 'Mercedes'});
        this.cars.push({label: 'Renault', value: 'Renault'});
        this.cars.push({label: 'VW', value: 'VW'});
        this.cars.push({label: 'Volvo', value: 'Volvo'});
    }
}

html:

<p-multiSelect [options]="cars" [(ngModel)]="selectedCars"></p-multiSelect>

<p>Selected Cars: {{selectedCars}}</p>

Plunker example

Upvotes: 1

Related Questions