CODEWITHSUNDEEP
angulartypescript
NieWei
NieWei

Reputation: 171

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

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?

Upvotes: 17

Views: 18908

Answers (3)

Pedro Penna
Pedro Penna

Reputation: 1187

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

Upvotes: 25

Teddy Sterne
Teddy Sterne

Reputation: 14219

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

Upvotes: 3

Tyler Jennings
Tyler Jennings

Reputation: 8921

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.

Upvotes: 2

Related Questions