Label in lwc accordion

Question

I'm attempting to customize a label in lightning-accordion. Next to the label I'm trying to place a count that populates from wrapper.

 <lightning-accordionSection key={account.id} name={account.name}  label={account.name -recordCount}> CONTENT </lightning:accordionSection>

But the label is incorrect. What is a better way to show?

One solution would be to concat the name and record count as a string and pass it from apex to ui. But I was hoping if there is a simpler way to customize the label on the accordion.

Answer 1

You can make use of getter property in Lightning web component evaluate the label value. It would be something like:-

get labelValue(){
return this.account.name +' - '+ this.recordCount;
}

and use this getter in html file as:-

<lightning-accordion-section name="B" label={labelValue}>
</lightning-accordion-section>

When you are dealing with more than one accordion section, you can create an array of javascript object where object properties can hold the computed label value and run an iteration using for:each directive to show accordion section.

    get features() {
        return [
            {
                label: this.account1.name +' - '+ this.recordCount1,
                name: 'section 1',
            },
            {
                label: this.account2.name +' - '+ this.recordCount2,
                name: 'section 2',
            },
            {
                label: this.account3.name +' - '+ this.recordCount3,
                name: 'section 3',
            },
        ];
    }