CODEWITHSUNDEEP
javascriptangularmulti-selectprimeng
alexkov
alexkov

Reputation: 465

Override a function in 'MultiSelect' component from PrimeNG

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.

enter image description here

Upvotes: 3

Views: 11505

Answers (1)

ArchbishopLolly
ArchbishopLolly

Reputation: 322

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!

Upvotes: 9

Related Questions