Replacing the [options] inside a p-dropdown

Question

In my angular project, I have a homepage containing a datatable and a filter.

homePage.component.ts defines the filter structure as a list of filter options, as such:

this.filterOptions = [

[...]

{
            name: 'verificationMethod',
            type: 'dropdown',
            operator: QueryOperator.EQ,
            params: {
                options: this.optionsRegole
            },
            label: 'Verifica',               
            placeholder: ''
}
]

The filter.component.ts is a reusable component, it receives the filterOptions and build the filter dynamically, like so:

<ng-container *ngFor="let option of filterOptions">
               
                <div class="ml-3 mr-3 form-group" [style.width]="option.width">
                    <ng-container [ngSwitch]="option.type" >
                        
                        [...]
                        
                        <ng-container *ngSwitchCase="'dropdown'">
                            <label for="data" class="font-weight-bold">{{option.label||option.name| titlecase}}</label>
                            <p-dropdown [options]="option.params.options" [formControlName]="option.name"
                            placeholder="Seleziona..." filter="true" [style.width]="option.width"
                            (onChange)="onChange($event)"
                            ></p-dropdown>
                        </ng-container>
                    </ng-container>
               </div>     
</ng-container>

As you can see, in case the filter type is 'dropdown', it creates a p-dropdown called "verificationMethod" and it assigns to it this.optionsRegole.

My problem is that I need to replace the content of this.optionsRegole based on the user input, but I can't figure out how to do it after the component is created. The filter.component.ts doesn't have a direct access to this.optionsRegole, it receives the values during initialization only, through the following line:

 [options]="option.params.options".

Updating this.optionsRegole inside homePage.component.ts doesn't work, as the filter.component.ts doesn't seem to be aware of the changes.

I tried to access the p-dropdown inside the filter, like so:

 let temp = this.formGroup.get('verificationMethod') as FormControl;

But I cannot find a way to replace the [options], any hint?

score 1 · Answer 1 · answered Jul 24 '23 at 21:02

The first step is to emit an event from the filter component whenever the dropdown changes. Inside the onchange function of the dorpdown, make sure to trigger that event and include any relevant data that can identify the specific filter being changed. Then, in your homepage component, listen to that event, waiting to catch that event and adjust the options accordingly.

Now, to make this whole thing work, it's essential to implement ngOnChanges in your filter component. This way, you'll be notified of any changes to the filter options.

After changing the filter options do the following:

this.filterOptions = [...filterOptions];

By doing this, the reference to filterOptions changes, and that's what makes ngOnChanges notify you of your changes.

Replacing the [options] inside a p-dropdown

1 Answers1