Override a function in 'MultiSelect' component from PrimeNG

Question

I'm new in JS. I have a small front-end task and I don't know how to solve it after few hours of googling.

I need to override this function in PrimeNG MultiSelect component: MultiSelect.prototype.updateLabel.

In project, I'm working on the label should be static, but alt text (when hovering) should be dynamic as in original realization.

It would be great if you point me to the right direction. I have found this page, but it didn't help me because I don't know how to implement it correctly.

Thanks in advance for any help.

what you have done so far ? – anshuVersatile Dec 06 '16 at 08:21 — anshuVersatile, Dec 06 '16 at 08:21
The page you've linked is about PrimeFaces, not PrimeNG – Jasper de Vries Feb 01 '23 at 16:19 — Jasper de Vries, Feb 01 '23 at 16:19

score 9 · Accepted Answer · answered Jan 13 '17 at 21:08

I had to do the same thing in my project.

Here's what I did to get it to work: In your component's .html file add something like:

<p-multiSelect #multiselect
        [options]="someOptions"
        [(ngModel)]="someModel.options"
        [defaultLabel]="Did this work?"
        (onChange)="onChange($event)"
>
</p-multiSelect>

Below the constructor in your component file, add:

@ViewChild('multiselect') multi: MultiSelect;

I put mine in a setter that is always called, but wherever you need to change the label - perhaps in a subscribe function - you can override using:

this.multi.updateLabel = function () {
    var label = this.value.length.toString() + " Data Points Selected";
    this.valuesAsString = label;
}

Hope that helps!

Thanks a lot! This is what I needed. – alexkov Jan 24 '17 at 12:21 — alexkov, Jan 24 '17 at 12:21

Override a function in 'MultiSelect' component from PrimeNG

1 Answers1