angular2 change @input value in child component then change this value in parent component not work
The value is being passed exclusively from parent to child because you're using square brackets.
In order for the value to go both ways, you need to use a two-way data binding.
That means your isShow attribute should be like:
@Input() isShow: boolean;
@Output() isShowChange = new EventEmitter<boolean>();
And the template should be
<child [(isShow)]="show"></child>
or
<child [isShow]="show" (isShowChange)="show = $event"></child>
Take a look at the two-way data binding tutorial page:
https://angular.io/guide/template-syntax#two-way-binding---
You are creating values out of sync between the child and parent. Since the parent is passing the value down into the child, you need to change the value in the parent only. To send a value from the child to the parent you need to use an Output
parameter as an EventEmitter
. It will look like this:
export class Parent {
show: boolean = false;
constructor() { }
showChild() {
this.show = true;
}
}
<child [isShow]="show" (updateValue)="show = $event"></child>
export class Child {
@Input isShow: boolean = false;
@Output() updateValue = new EventEmitter();
constructor() { }
onClick() {
this.updateValue.emit(false);
}
}
This emits the value false
when the onClick
method in the child runs. The parent receives that new value and assigns it to it's show
variable, which gets sent down to the child component.
You need to use a getter
and setter
for the value so you can use the two-way data binding syntax. This can be accomplished using the following:
export class Child {
private isShowValue = false;
@Input()
public get isShow(){
return this.isShowValue;
}
@Output() isShowChange = new EventEmitter();
set isShow(val) {
this.isShowValue = val;
this.isShowChange.emit(this.isShowValue);
}
constructor() { }
onClick() {
this.isShow = false;
}
}