0

I'm trying to dynamically style the LWC progressbar with color and width. As I cannot assign a JS variable to the style tag in template I try the following in JS:

let fleetBarStyle = this.template.querySelector('[data-id="fleetBarId"]');
        console.log('***Fleetbarstyle: ' + fleetBarStyle);
        if(fleetBarStyle){
            fleetBarStyle.style.backgroundcolor ='red';
            fleetBarStyle.style.width = this.approvedFleetPercent <= 100 ? "'" + this.approvedFleetPercent + "'%" : '100%'; 
        }

The template part looks like this:

<div class="slds-progress-bar slds-progress-bar_large" aria-valuemin="0" aria-valuemax="100" aria-valuenow={approvedFleetPercent} role="progressbar">
                            <span data-id="fleetBarId" class="slds-progress-bar__value slds-progress-bar__value_success slds-progress-bar_circular">
                            <span class="slds-assistive-text">Progress: {approvedFleetPercent}</span>
                            </span>
                        </div>

The Span tag is found. But I cannot assing the style. Is this possible?

5
  • 2
    Does this answer your question? Set CSS class dynamically in Lightning web component
    – glls
    Mar 29, 2021 at 17:03
  • Maybe I read it wrong. To add or remove a css class is not the problem what I have. The problem is to assign the percentage of the progress bar, which is calculated in JS to "style="Width:xx%". Which is normally done here: <span class="slds-progress-bar__value" style="width: 100%">
    – RRI
    Mar 29, 2021 at 22:03
  • it comes down to the same, you do it in your js file, and you modify the class that needs to be returned to your element in the template.
    – glls
    Mar 29, 2021 at 22:06
  • I managed to solve my problem, inspired thru your comment. If you create an answer I will mark it as best solution.
    – RRI
    Mar 30, 2021 at 12:19
  • Glad you were able to do so =), posted a code snippet for you to refer to ;). Happy coding
    – glls
    Mar 30, 2021 at 13:46

2 Answers 2

2

In order to programmatically update a % in class in your template, you will have to do your calculations in your JS file as stated in Set CSS class dynamically in Lightning web component

Ideally, you want to setup a getter to retrieve the updated value once a percentage attribute has changed. Example: from the SLDS blueprint code samples: Progress Bar Template

<div>
    <div class="slds-grid slds-grid_align-spread slds-p-bottom_x-small">
      <span>Percentage Sample</span>
      <span aria-hidden="true">
        <strong>{percentile}% Complete</strong>
      </span>
    </div>
    <div class="slds-progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow={percentile} aria-labelledby="progress-bar-label-id-6" role="progressbar">
      <span class="slds-progress-bar__value" style={widthPercentage}>
        <span class="slds-assistive-text">Progress: {percentile}%</span>
      </span>
    </div>
    <button class="slds-button" onclick={increase} >+ 1%</button>
    <button class="slds-button" onclick={decrease} >- 1%</button>
  </div>

JS File:

export default class Progress extends LightningElement {
    tick = 0;

    get percentile(){
        return `${(this.tick / 10)*1}`
    }

    get widthPercentage(){
        return `width:${this.percentile}%`
    }

    increase(){
        this.tick +=10
    }
    decrease(){
        this.tick -=10
    }

}

enter image description here

0

You can use variables, you just can't use them inline in the value for a tag's attribute.

Example that does NOT work:

style="background-color: {legendEntry.color}"

where {legendEntry.color} = "#abcdef"

Example that DOES work:

style={legendEntry.color}

where {legendEntry.color} = "background-color: #abcdef"

Hope that helps!

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .