Dynamic Dropdown

Question

Hi

I am using Angulat material Table. In Header i have Add Button and a dropdown with option Export to excel., csv . I want that dropdown options should be Dynamic. If i want export to pdf it should appear automatically in every component where dropdown is defined..

Thanks.

Jayraj Chhaya · Answer

To achieve dynamic dropdown options in an Angular Material Table, you can create a shared service to manage the dropdown options centrally. This service can be injected into components where the dropdown is used to fetch the dynamic options. Create a service to manage the dropdown options: import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class DropdownService { private options = new BehaviorSubject (['Export to Excel', 'Export to CSV']); getOptions() { return this.options.asObservable(); } addOption(newOption: string) { this.options.next([...this.options.getValue(), newOption]); } } In your component where the dropdown is used, inject the DropdownService and subscribe to the options: export class YourComponent { options: string[]; constructor(private dropdownService: DropdownService) { this.dropdownService.getOptions().subscribe(options => { this.options = options; }); } } To add "Export to PDF" dynamically, call the addOption method in the service from any component: this.dropdownService.addOption('Export to PDF');

Dynamic Dropdown

Answers (1)