Dynamically change material-dropdown-selection options using searchbox with keyup event in AngularDart - angular-dart

Question

I have a dropdown menu with a search box to select out of about 1000 Options which are hierarchical. I begin to show top categories 1, 2, 3 in the dropdown. If you enter, say '1' a filter I implemented will now show subcategories 11, 12, .. of 1 only. This filter is called using keyup event on material-select-searchbox. I get a 'Expression has changed after it was checked'.
I suspect I get this error because I cannot modify parent input params just like that. I tried to solve the problem implementing the event handler in the parent component, modifying a parent variable (StringSelectionOptions categories in categories-selector.dart) that is an input to the material-select-searchbox (in categories-selector.html) - but this does not work.
I also tried fiddling around with #ViewChild but - without proper results.
I heard about StreamController and EventBusses, but I am not sure how to use these to solve my problem using library components (i.e. MaterialDropdownSelectComponent and MaterialSelectSearchboxComponent).
categories.dart
class Categories {
static final List<Category> categories = [
["1", "", "Category 1"]
["2", "", "Category 2"]
["11", "1", "Category 11 - Subcategory of 1"]
["12", "1", "Category 12 - Subcategory of 1"]
["21", "2", "Category 21 - Subcategory of 2"]
["22", "2", "Category 22 - Subcategory of 2"]
//... a thousand more ...
].map(
(c) => Category(c.first, els[1], els.first + " " + els.last)
).toList();
List<Category> filter(String searchterm){
return categories.where( (nc) =>
nc.parent == parent ).map((nc) => nc).toList();
}
}
class Category implements HasUIDisplayName {
String code;
String parent;
String label;
Category(this.code, this.parent, this.label);
#override
String toString() => label;
}
categories-selector.dart: imports
import 'dart:async';
import 'package:angular/angular.dart';
import 'package:angular_components/material_button/material_button.dart';
import 'package:angular_components/material_icon/material_icon.dart';
import 'package:angular_components/material_select/material_dropdown_select.dart';
import 'package:angular_components/material_select/material_select_searchbox.dart';
import 'package:angular_components/model/selection/string_selection_options.dart';
import 'package:right_scenario_explorer/src/activity_editor/scope_collapse_mixin.dart';
import 'package:right_scenario_explorer/src/company/activity.dart';
import 'package:right_scenario_explorer/src/company/emission.dart';
import 'package:right_scenario_explorer/src/utils/formatter.dart';
import 'package:right_scenario_explorer/src/utils/nace_codes.dart';
categories-selector.dart: code
#Component(
exports: [Formatter, Categories],
selector: "categories-selector",
templateUrl: "categories-selector.html",
directives: [
coreDirectives,
MaterialDropdownSelectComponent,
MaterialSelectSearchboxComponent,
MaterialButtonComponent,
MaterialIconComponent,
]
)
class CategoriesSelector extends OnInit with {
#Output()
Category selectedCategory;
StringSelectionOptions<Category> categories;
#override
void ngOnInit() {
getCategoryOptions("");
}
void getCategoryOptions(String searchterm) {
Categories categories = new Categories();
var selectedOptions = categories.filter(searchterm);
categoryOptions = StringSelectionOptions(selectedOptions);
}
void categorySearchBoxEventHandler(dynamic event){
getCategoryOptions(event.target.value);
}
void updateSelectedCategory(Category category) {
selectedCategory = category;
}
}
categories-selector.html
<div>
<material-dropdown-select
buttonAriaRole="combobox"
[buttonText]="selectedCategory == null ? 'None' : selectedCategory.toString()"
[options]="categories"
(selection)="updateSelectedCategory($event)"
[listAutoFocus]="false"
[activateFirstOption]="false"
<div header>
<material-select-searchbox
(keyup)="categorySearchBoxEventHandler"
label="Search..."
[filterable]="categories">
</material-select-searchbox>
</div>
</material-dropdown-select>
</div>
I would like to know how I can modify the options of material-dropdown-select from the keyup event of the material-select-searchbox. Any suggestions are much appreciated! Thank you!

Answer 1

You could try material-auto-suggest-input
that has been made to dynamically update options when you enter a value.