Ag-Grid: Show options depending the choice on another field

Question

I'm building a new grid but i need a select field that options appear depending on the choice of the first field.

I have two cellEditors

  columnDefs = [

{ field: 'typePizza', editable:true, cellEditor:'pizza'},
{ field: 'toppings', editable: true, cellEditor: 'gridSelect' }

];

The 'pizza' one is a select that i choose a type of pizza, the gridSelect have a multiple select that i can choose one or more ingredients but I need to show the options that are affected by the type of pizza.

I have this toppingList on gridSelectComponent: toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

And PizzaList on PizzaComponent pizzaList: string[] = ['Pizza A','Pizza B', 'Pizza C'];

For example, if i choose Pizza A i want that on that row only appear the options 'Extra Cheese, Onion' options.

If i choose Pizza B only appear the options 'Mushroom, Tomato'

Stackblitz

How can i do this?

Thank you

Answer 1

On your mat-select, upon the event of the dropdown being expanded, call a method in your class:

(openedChange)="matOpenedChanged($event)"

In this method, see what the value of the typePizza field is and set your dropdown list appropriately:

matOpenedChanged(event) {
    const currentPizzaType = this.params.data.typePizza;
    if (currentPizzaType == 'Pizza A') {
      this.toppingList = ['Extra cheese', 'Onion'];
    } else if (currentPizzaType == 'Pizza B') {
      this.toppingList = ['Mushroom', 'Tomato'];
    } else {
      this.toppingList = [
        'Extra cheese',
        'Mushroom',
        'Onion',
        'Pepperoni',
        'Sausage',
        'Tomato'
      ];
    }
  }

Demo.