CODEWITHSUNDEEP
angular
charsi
charsi

Reputation: 3907

Update input value in child even when it stays unchanged in parent angular 2+

I am passing a value to a child component like so ..

<app-child-component[prop1]='prop1'></app-child-component>

and catching it in the child like so ..

 @Input() prop1:boolean;

This is a boolean value that changes from false to true in the parent when a button is pressed. In the child it is changed back to false when another button is clicked.

At this point if I press the button in parent again nothing happens. The value of prop1 is still true in the parent so no change is detected and nothing is sent to the child. I understand this is expected behavior.

Is there a way however to still force the value of prop1 to be pushed to the child again?

EDIT: I might need two-way data binding in this scenario but as I am not actually using the value of prop1 in the parent just the ability to update it again in the child should suffice.

Upvotes: 1

Views: 2805

Answers (2)

charsi
charsi

Reputation: 3907

okay found a way without 2-way data binding..

In the parent .. 

<button type="button" (click)="prop1=!prop1">...</button>
<app-child-component [setProp]='prop1'></app-child-component>

And in the child ..

prop1:boolean;
  @Input()
  set setProp(p: boolean) {
    this.prop1 = true;
}

So every time I click the button in the parent the value changes and is sent to the child every time. And since a button click in the parent always means the value needs to be true in the child, that is what i am doing in the set function.

Edit: The use case for this is a modal dialog with the modal being in a child component. Parent has the button to open the modal and the modal has a close button.

Upvotes: 2

Obed Amoasi
Obed Amoasi

Reputation: 2049

you will have to emit the value from the chld to the parent, so yea 2 way binding

in child

  @Output() booleanEmitter= new EventEmitter();

onButtonClick(){
    this.booleanEmitter.emit(this.prop1);
}

in parent 

<app-child-component (booleanEmitter)="getProp($event)"  [prop1]='prop1'></app-child-component>

getProp($event){
this.prop = $event as boolean
}

Upvotes: 1

Related Questions