My child component is structured as shown below,
ChildComponent.html
<div>
<button type="button" data-toggle="dropdown" aria-haspopup="true" (click)="toggleDropdown()">
{{ selectedItemName }} <span></span>
</button>
<div *ngIf="showDropdown">
<ul class="default-dropdown">
<li *ngFor="let item of list" (click)="onSelectItem(item.value)" [ngClass]="{'active': item.value==selected}">
<a>{{item.name}}</a>
</li>
</ul>
</div>
</div>ChildComponent.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
declare const _: any;
@Component({
moduleId: module.id,
selector: 'child-component',
templateUrl: 'child.component.html'
})
export class ChildComponent {
@Input() list: any;
@Input() selected: string;
@Output() onSelect = new EventEmitter<any>();
showDropdown: boolean;
selectedItemName: string;
constructor() {
this.showDropdown = false;
}
ngOnInit() {
this.setSelected(this.selected);
}
setSelected(selected: string) {
const selectedItem = _.find(this.list, (item: any) => {
return item.value === selected;
});
this.selectedItemName = selectedItem.name;
}
toggleDropdown() {
this.showDropdown = !this.showDropdown;
}
onSelectItem(selected: string) {
this.onSelect.emit(selected);
this.setSelected(selected);
this.toggleDropdown();
}
}I am including this child component in the parent component like this,
<div class="col-md-offset-2 col-md-8 search-filter-buttongroup-wrapper">
<ul>
<li class="timeframe">
<child-component [list]="allRegions" [selected]="selectedRegion" (onSelect)="onSelectRegion($event)"></child-component>
</li>
<li class="clear-text header-search-block-text" (click)="clearFilters()">
<span><img src="../imgs/reset.svg">Clear Filters</span>
</li>
</ul>
</div>Although the dropdown values are being set correctly when changed, upon clicking "Clear Filters," the values do not reset on the parent component. The selected values remain unchanged. This is the method to clear the selected values.
clearFilters() {
this.selectedRegion = '';
}What could be causing this issue?