I have this code in html:

    <lightning-progress-indicator id="path" current-step={currentStep} type="path" variant="base">
        <template for:each={allStages.data} for:item="stage">
            <lightning-progress-step label={stage.Name} value={stage.Name} key={stage.Name} onclick={handleClick} ></lightning-progress-step>

Code in js:

    import getAllStages from '@salesforce/apex/PathController.getAllStages';
    import STAGE_NAME from '@salesforce/schema/Stage__c.Name';

    export default class CustomPath extends LightningElement {
    @api recordId;
    @track currentStep
    @wire(getAllStages, { matterId: '$recordId', fields: [STAGE_NAME] })
        this.currentStep = event.target.index;

So, how can I fill current-step={currentStep} from js?

1 Answer 1


As stated in the documentation current-step (emphasis mine)

Set current-step to match the value attribute of one of progress-step components. If current-step is not provided, the value of the first progress-step component is used.

So the handleClick method should be

    this.currentStep = event.target.value;

By the way, after Spring '20 there is no need for the @track decorator in such cases.
All fields in a Lightning web component class are reactive. If a field’s value changes, and the field is used in a template or in a getter of a property that’s used in a template, the component rerenders and displays the new value. More info here.

  • Thanks, @RubenDG, it works for me. I'm new in JS, so my questions may seem silly. However, thanks for your help!
    – oldgunner
    Apr 9, 2021 at 6:52

You must log in to answer this question.

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