dss-ng-select Documentation

Attributes

Core Binding

• bindLabel="lb_name"
  The property from your API response object that will be shown as the display label in the dropdown.
  → Example: if API returns { lb_id: 101, lb_name: 'John' }, then "John" appears in the dropdown.

• bindValue="lb_id"
  The property used as the actual value bound to ngModel.
  → Example: selecting "John" sets entity.L_id = 101.

• name="company"
  Angular’s form control name. Useful in reactive/template-driven forms.

Selection & Behavior

• [multiple]="false"
  Whether multiple selections are allowed. true = multi-select, false = single-select.

• [clearable]="true"
  Whether the selected value can be cleared with a small "×" button.

• label="Company"
  A field label displayed above or alongside the dropdown.

• placeholder="Select Users"
  Text shown when nothing is selected.

Data Source

• URL="Labour/LabourList"
  API endpoint to fetch dropdown data.
  → Your component likely makes an HTTP request internally.

• [apiParams]="{ branch_id: '102' }"
  Extra parameters passed to the API call.
  → Example: the API will be called as /Labour/LabourList?branch_id=102.

• [searchParams]="[{ key:'lb_name', value: entity.L_id || ''}]
  Dynamic search filtering passed along with the API call.
  → Example: adds lb_name=... to query string.

Styling

• [cssStyle]="'width:300px'"
  Inline CSS style applied to the dropdown (here, width set to 300px).

Extra Info

• [OnSubItems]={'Mobile No':'lb_mobile_no'}
  Additional info shown in the dropdown items.
  → Example: If API returns { lb_mobile_no: '9876543210' }, it may display as:
  John
  Mobile No: 9876543210

Data Binding

• [(ngModel)]="entity.L_id"
  Two-way data binding between the dropdown and your Angular component variable.
  → Keeps entity.L_id in sync with the selection.

Events

• (change)="getValue($event)"
  Triggered when the user selects/clears a value.
  • $event will contain the full object or the bound value (depending on your component’s implementation).
  • Example:

    getValue(selected: any) {
      console.log('Selected Value:', selected);
    }

Example Usage

<dss-ng-select
      bindLabel="lb_name"
      name="company"
      bindValue="lb_id"
      [multiple]="false"
      [clearable]="true"
      label="Company"
      (change)="getValue($event)"
      [cssStyle]="'width:300px'"
      placeholder="Select Users"
      URL="Labour/LabourList"
      [apiParams]="{ branch_id : '102'}"
      [OnSubItems]="{'Mobile No':'lb_mobile_no'}"
      [searchParams]="[{key:'lb_name',value:entity.L_id || ''}]"
      [(ngModel)]="entity.L_id"
></dss-ng-select>

Component TS Import → Makes the element usable in that component’s template.

app.config.ts provideDssNgSelect() → Sets up global defaults/config (like base API URL) so you don’t need to repeat them everywhere.

provideDssNgSelect({ apiUrl: ApiPath })

Summary

This is a custom Angular select component (dss-ng-select) that:

• Auto-fetches data from an API (URL + params)
• Displays labels/values with optional extra subitems
• Supports styling and form integration
• Works with Angular two-way binding and emits change events