How to keep Parent component event after rendering child component

Question

I have a parent component with 3 radio buttons i.e child-one, child-two and child-three. On click of radio buttons respective child component is displayed. Now, within this child component I have a radio button Yes,No. On click of this child component radio button. Parent component radio button that was clicked its click event gets disappears.

I have passed the data using @Input and @Output to emit the child data.

On click of parent component radio button or on click of child component radio button. radio button click event should not get reset.

Here's a code link with the problem

abney317 abney317 · Accepted Answer · 2019-07-25T18:20:54

Your parent radio buttons are missing the name property

Something like this should fix the issue:

  <input type="radio" [(ngModel)]="childName" value="child_one" name="parent">
  <label class="spacebetweenRadio">child_one</label>
  <input type="radio" [(ngModel)]="childName" value="child_two" name="parent">
  <label class="spacebetweenRadio">child_two</label>
  <input type="radio" [(ngModel)]="childName" value="child_three" name="parent">
  <label class="spacebetweenRadio">child_three</label>

Stackblitz

How to keep Parent component event after rendering child component

1 Answers