Search code examples
angularangular-ngselect

Reading a dynamic value into ng-select


Hello for my application I am trying to create a dynamic menu with different dropdowns for different components. For example, when I initlize a component I request an object from an api that looks like

column: 3
corresponding_column: "sku__brand"
field_name: "Brands"
id: 9
list_name: "list1"
param: "brand"
parent: ""
report_type: "all_orders"
request_type: "GET"
row: 2
selected_items_name: "selectedItems5"
settings_name: "dropdownSettings1"
show: 1
show_value: "Brands"
type: "Dropdown"

I then am trying to read my object into ng-select field

<div *ngFor="let x of row2">
                <div *ngIf="x.type=='Dropdown' &&  x.field_name!='dropdown'">
                  
                    <ng-select *ngIf='Advanced==true' formControlName="search_type_value" class="second-row-box"
                      placeholder=x.field_name [items]=x.list_name bindLabel="itemName" bindValue="id"
                      [(ngModel)]=x.selected_item_name [multiple]="true" [selectableGroup]="true"
                      [closeOnSelect]="false" [maxSelectedItems]="1" (click)='send_request_1("ASIN")'>
                      <ng-template ng-header-tmp>
                        <button (click)="selectAll(list1)">Select all</button>
                        <button (click)="unselectAll()">Unselect all</button>
                      </ng-template>
                      <ng-template ng-footer-tmp>
                        Selected count: {{selected.length}}
                      </ng-template>

                    </ng-select>
                 
                </div>
              </div>

What I get is enter image description here

What I want is for x.field_name to be Brands


Solution

  • change placeholder to [placeholder] - this marks it to angular to interpret as input and the ng-select component gets the value passed (instead of simply the string)

    You can tell it's a real input for that component by going to the source code