Passing variable value from js file to hbs component

1

Hi I have a Global variable as in js file, I want to retrieve value of that Variable in hbs file

    export default () => {
    selectedViolationTypeId: 0,
    addProgram(program) {
         this.set('selectedViolationTypeId', program.ViolationTypeId);
     },
    }

The value of the selectedViolationTypeId changes in the addProgram function call, that changed value I want to retrieve in the hbs file, at the URL field like this: url=‘api/branch/inspectionitemcategories/dt?violationTypeId={selectedViolationTypeId}’

 <div class="col-md-8">
                    {{log 'selectedViolationTypeId'}}
                    {{log selectedViolationTypeId}}
                        <div class="form-group chosen-fix {{if failTest 'has-error q'}}">
                            <label class="control-label">Inspection Item Categories</label>
                            {{#drop-down url='api/branch/inspectionitemcategories/dt?violationTypeId={selectedViolationTypeId}'
                            id='idInspectionItemCategories'
                            required=false
                            placeholder='Add Program (Search)'
                            showSelected=false f=f as |item|
                            }}
                            {{log 'item 1'}}
                            {{log item}}
                            {{#if item}}
                            {{partial 'components/edit-item/partial-select1'}}
                            {{else}}
                            <i>Nothing Here</i>
                            {{/if}}
                            {{/drop-down}}
                        </div>
                    </div>

But its not happening, at the url field this selected value is coming as null with error message as below

:56974/api/branch/inspectionitemcategories/dt?violationTypeId={{this.selectedViolationTypeId}}:1 Failed to load resource: the server responded with a status of 400 (Bad Request)
api.js:77 api/branch/inspectionitemcategories/dt?violationTypeId={{this.selectedViolationTypeId}} error undefined Object

can somebody please help me how can I retrieve its value in the front end hbs file?

2

It is not clear where the selectedViolationTypeId is set.

However, assuming all components inherits “your global component” you can use a getter to access the value in the template

get getSelectedViolationTypeId() { return this.selectedViolationTypeId; }

and in template this.getSelectedViolationTypeId

Another way to do this if you are using glimmer components, you can simply use tracked property @tracked selectedViolationTypeId

1 Like
3

Hi where can I put this statement, can I write it within the addProgram, I think its not maintaining the State, because addProgram is called by one dropdown then in another dropdown we need that selected value to load its values. Any help please, its like cascading dropdowns.

4

If you are using 3.16 or above, you can use a tracked property, or use a getter with the get(this, ‘propName’).

If you are using lower than 3.16, you can use a computed property.