Editable select not adding new option mdbootstarp

A common issue!

When using the editable-select component in Material Design Bootstrap (MDB), it's known to have some quirks when it comes to adding new options dynamically.

Here are a few possible solutions to help you add new options to your editable select in MDB:

Use the mdb-select component with options attribute: Instead of using the editable-select component, try using the mdb-select component with the options attribute. This will allow you to define the options statically or dynamically.

Example:

<mdb-select [options]="options" [(ngModel)]="selectedOption">
  <mdb-select-option *ngFor="let option of options" [value]="option.value" [text]="option.text"></mdb-select-option>
</mdb-select>

Use the mdb-editable-select component with options attribute and addOption event: If you still want to use the editable-select component, you can use the options attribute to define the initial options and the addOption event to add new options dynamically.

Example:

<mdb-editable-select [options]="options" [(ngModel)]="selectedOption" (addOption)="addOption($event)">
  <mdb-editable-select-option *ngFor="let option of options" [value]="option.value" [text]="option.text"></mdb-editable-select-option>
</mdb-editable-select>

In your component, you'll need to define the addOption method to handle the new option:

addOption(newOption) {
  this.options.push(newOption);
}

Use a custom dropdown component: If the above solutions don't work for you, you can create a custom dropdown component using MDB's mdb-dropdown component and add new options dynamically using JavaScript.

Example:

<mdb-dropdown [options]="options" [(ngModel)]="selectedOption">
  <mdb-dropdown-option *ngFor="let option of options" [value]="option.value" [text]="option.text"></mdb-dropdown-option>
  <mdb-dropdown-option (click)="addOption()">Add new option</mdb-dropdown-option>
</mdb-dropdown>

In your component, you'll need to define the addOption method to add a new option to the dropdown:

addOption() {
  const newOption = { value: 'new-option', text: 'New Option' };
  this.options.push(newOption);
}

I hope one of these solutions helps you add new options to your editable select in MDB!

NewsBreakers

Editable select not adding new option mdbootstarp