I have a problem with the propagation of an @Input and an select from angular material. My select depends on a parent and communicate via @Input and @Ouput. When I select an option, I send the value to the parents and the parents intercept this response and validate if he can change the value.
In the case where the parent tells the children it can't update its value for some reason, I don't change the value in the Input of the children. In that case, the ngModel in the select box does not reflect the value of the Input.
I need a way to tell my child to go back to the initial value already present in the Input
An example to show how the child communicate with the parent:
@Component({
selector: 'child',
template: `
<md-select placeholder="Périodes" name="Périodes"
[ngModel]="selected" (ngModelChange)="filterOptionsChange($event, 'periode')">
<md-option *ngFor="let periode of periodes" [value]="periode">
Semaine {{periode.id}}
</md-option>
</md-select>`
})
export class Child {
@Input() selected: any;
@Output() filterChange = new EventEmitter<any>();
filterOptionsChange(evt, type: string) {
this.filterResult[type] = evt;
this.filterChange.emit(this.currentFilter);
}
}
@Component({
selector: 'my-parent',
template: `
<div>
<child [selected]="selected" (valueChanged)="validate($event)"></child>
</div>`
})
export class App {
selected:any;
constructor() {
}
validate(event) {
if (true) {
// do that and change the selected value
} else {
//do nothing, and keep the initial selected value
}
}
}