Adding a new dropdown menu on button click with Angular-CodePudding

I am trying to add a new dropdown menu when a user clicks a button. As I am new to Angular(typescript), I am having a little difficulty trying to create additional attribute fields. I am not sure if it is better to keep track of newly added dropdowns with an array controlled by an ngFor. Any suggestions are appreciated

The html

<h3>Attribute</h3>

<button>Add new Attribute</button>

<select (change)="updateAttributeSelected($event)">
  <option *ngFor="let attribute of this.attributes" [value]="attribute">
    {{ attribute }}
  </option>
</select>

<div id="divider">
  <h3 id="groupValue">Select group value</h3>
  <select (change)="updateSelectedGroupValue($event)">
    <option *ngFor="let value of this.groupValues" [value]="value">
      {{ value }}
    </option>
  </select>

  <div></div>

  <h3>Statement</h3>
  <input type="text" [value]="this.attributeField" />
</div>
<div>-------------</div>

<div>
  Console Area
  <div></div>
</div>

the ts code

export class DropDownComponent {
  groupValues = ['All Values', 'Explicit Values', 'Ranges'];
  attributes = ['startTimeIso', 'speedTime', 'subscriberId', 'chargeNumber'];

  public elements: Array<string>;
  public attributeSelected = this.attributes[0];

  public selected = this.groupValues[0];

  public attributeField: string;
  public groupTypeValue: string;
  public allValues: AllValues;

  constructor() {
    this.attributeField = '';
    this.elements = new Array<string>();
    this.setDefaultAttribute();
  }

  public setDefaultAttribute() {
    let baseAttribute = this.attributeField;
    return baseAttribute;
  }

  public updateSelectedGroupValue(value) {
    this.selected = value.target.value;
    this.groupTypeValue = this.selected;
  }

  public updateAttributeSelected(field) {
    this.attributeSelected = field.target.value;
    this.attributeField = this.attributeSelected;
  }

  public buildAllValues() {
    this.allValues.buildFacet(this.attributeField, groupType.ALL_VALUES);
  }
}

CodePudding user response：

There are many dropdown menus in angular. Please refer this. https://stackblitz.com/edit/angular6-bootstrap4-dropdown

CodePudding user response：

I think you should store your attributes in a BehaviorSubject, because that gives you more power querying and updating your state - as well as notify Angular's ChangeDetection to update your presentational layer. The minimal reproduction of your issue is the following - I think from this point you can implement your own custom logic.

.html

<h3>Attribute</h3>

<button (click)="onAddNewClick()">Add new Attribute</button>

<select (change)="updateAttributeSelected($event)">
  <option *ngFor="let attribute of this.attributes | async" [value]="attribute">
    {{ attribute }}
  </option>
</select>
// ...your logic goes on...

.ts

// ..your logic..
  public attributes = new BehaviorSubject<Array<string>>(['startTimeIso', 'speedTime', 'subscriberId', 'chargeNumber']);

//... your logic ...

  public onAddNewClick() {
    const newAttr = '<your-new-attribute>';
    this.attributes.next([...this.attributes.value, newAttr]);
  }

After you click the button, the function will next the current and the new attributes as well - and the | async pipe (imported from CommonModule) will handle your presentational layer updates.