angular2 change @input value in child component then change this value in parent component not work

Question

parent component class

export class Parent {
   show: boolean = false;
   constructor() { }
   showChild() {
      this.show = true;
   }
}

parent component template

<child [isShow]="show"></child>

child component class

export class Child {
   @Input isShow: boolean = false;
   constructor() { }
   onClick() {
      this.isShow = false;
    }
}

after I triggered onClick() in child component, the showChild() would not work to show the child component.

why?

Answer 1

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---

Answer 2

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.

Answer 3

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;
    }
}