menu

Questions & Answers

two-way binding on width and height attributes of a selection-list

as shown below in the code, i have a modal and i set the values of the width and height programatically. this._InsecProdPropService.startWSToGetAllSubCultures(this.prodCode) results in setting *ngIf="showSubCulturesSelectionList" to true, which consequently results in showning a selection list.

my question is, how can i get the width and height of that selection list once it is drawn on the screen programmatically? in other words, i would like to have something like two-way binding on the width and height attributes of the selection list, because that selectio list will be populated with different entries differ in width. which means for some entries the width could be 100px and for others could be larger, hence i would like to bind on the width and height so i can customize the size of the parent/container modal

code:

this.subEvtEmitterForResponseCode = this._InsecProdPropService.getEvtEmitterForResponseProductCode().subscribe((data)=>{
      if (data.length == 0) {
        throw new Error('WTF.');
      }
      if (data.length > 1) {
        throw new Error('WTF.');
      }
      
      this.prodCode = data[0]['code']
      this._InsecProdPropService.startWSToGetAllSubCultures(this.prodCode)
      this.width = 150
      this.height = 150
    })
    

css code

<div class="modal-content" [style.bottom.px]="width" [style.top.px]="height"> </div>
Comments:
2023-01-19 15:42:04
I'm not sure I understand what you're trying to do. Why not have CSS handle the width of your modal instead of trying to set it from the component? It looks like you're trying to use absolute positioning to determine the modal's size. That seems complicated.
Answers(0) :