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

Question

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.

you need to use two way binding in angular to do that, have a look at https://angular-2-training-book.rangle.io/handout/components/app_structure/two_way_data_binding.html — Arun Gopinathan, Feb 02 '18 at 16:06
@ArunGopinathan Please see the edit note. 2-way data binding might be the way to go but I don't really need it in this scenario if there is another way to achieve what I am looking for. — charsi, Feb 02 '18 at 16:07
Take a look at [this answer](https://stackoverflow.com/a/37677652/1009922). You could use a `Subject` to notify the child that the button of the parent component was clicked. — ConnorsFan, Feb 02 '18 at 16:09

charsi · Accepted Answer · 2018-02-02T17:20:06.040

2

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.

edited Feb 02 '18 at 17:20

answered Feb 02 '18 at 16:48

charsi

2,917
22
40

Does that answer the question? You indicate in the title that the value in the parent does not change. – ConnorsFan Feb 02 '18 at 17:43
I might need to reword my question. I am trying to send a button click from the parent. The value in the parent does not really matter – charsi Feb 02 '18 at 18:05
1

You may want to answer [this question](https://stackoverflow.com/q/37677122/1009922), which deals exactly with this subject. – ConnorsFan Feb 02 '18 at 19:32

score 1 · Answer 2 · answered Feb 02 '18 at 16:17

1

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
}

answered Feb 02 '18 at 16:17

Obed Amoasi

1,837
19
27

Thanks for the 2 way data binding example. I am going to use this if I can't find another way. It feels wrong though to use 2 way data binding when I am not really using the data in the parent. – charsi Feb 02 '18 at 16:22
then you can use a service – Obed Amoasi Feb 02 '18 at 16:22

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

2 Answers2