sarpay-echonos
11/7/2019 - 6:39 AM

Dropdown Population

Sample 1

TS

carriers: any[] = [];

// if in page; when init event fired
ngOnInit(): void {
  this.getCarriers();
}
// *** -- OR -- ***
// if in modal; show event fired
show(controlNumberId?: number): void {
  if (!controlNumberId) {
    // got no id, we're in create mode.
    this.getCarriers();
  } else {
    // got id, so we're in edit mode.
    this.getCarriers(); // needs to happen before EDIT proxy call
  }
}

getCarriers() {
  if (this.carriers.length === 0) {
    this._controlNumbersServiceProxy
      .getAllLookupForLookupTable('', 1, '', 0, 1000)
      .subscribe(result => {
          for (let carrier of result.items) {
              this.carriers.push({label: carrier.displayName, value: carrier.id});
          }
      });
  }
}

HTML

<div class="col-md-6">
  <div class="form-group">
    <label for="ControlNumber_Carriers">{{l("Carrier")}}</label>
    <div class="input-group">
      <select name="controlNumberCarriers" id="ControlNumber_Carriers"
        class="form-control bs-select" [(ngModel)]="controlNumber.carrierId">
        <option *ngFor="let carrier of carriers" [value]="carrier.value">{{carrier.label}}</option>
      </select>
    </div>
  </div>
</div>

Sample 2

TS

import { ElementRef } from '@angular/core';

@ViewChild('sourceNameCombobox', {static: true}) sourceNameCombobox: ElementRef;

sourceNames: string[] = [];

ngOnInit(): void {
    this.sourceNames = _.map(
      _.filter(
        abp.localization.sources,
        source => source.type === 'MultiTenantLocalizationSource'
    ),
    value => value.name
  );
}

HTML

<div class="col-sm-6 col-md-3">
    <div class="form-group">
        <label for="TextSourceSelectionCombobox">{{"Source" | localize}}</label>
        <select #sourceNameCombobox name="sourceName" class="form-control bs-select" [(ngModel)]="sourceName">
            <option *ngFor="let sourceName of sourceNames" [value]="sourceName">{{sourceName}}</option>
        </select>
    </div>
</div>