Radio button value from child to parent component - Angular

Question

I am working with a parent component and a child component.

I have two radio buttons, if I select “Change Title” and write a new text , the ’Original Title’ is updated with the new value. And that works fine but how can I do to restore the original title if I focus on “keep original Title” ?

MY CODE

Are you asking how to restore a variable after it's been changed? — fix, Sep 09 '22 at 21:53
If I write something in the input field and then choose radio button “Keep Screening” what I want to achieve is avoid that the variable change. — , Sep 09 '22 at 22:42

score 0 · Accepted Answer · answered Sep 10 '22 at 00:35

Based on the code you have written you need to create a formGroup (in case of Reactive Form) and pass the value of the radio button as well as the text from child to parent. Based on those values you need to write a conditional statement in the parent component which will decide whether to change the title or not. I have created a sample code here. Sample created in a very short time so please cross check if performance can be enhanced. While dealing with forms try to use ReactiveForms or TemplateDrivenForms and try to use lesser div in the design.

Please mark it as answer if it resolves your query. Happy Coding :)

score 0 · Answer 2 · answered Sep 10 '22 at 01:05

The answer to your question is a temp variable to store the changed value before save.

Mistakes in your code:

Missing change event handler for your checkbox; this helps to toggle values.


  handleCheckboxEvent($event) {
    const val = +$event.target.value;
    if (val) {
      this.disableTextbox = false;
      this.tempData.emit();
    } else {
      this.disableTextbox = true;
      this.boxValue = null;
      this.tempData.emit(null);
    }
  }

Missing keyup event handler / ngModel to bind the temp value to your title.

Go through the code in the Updated Fiddle

score 0 · Answer 3 · answered Sep 14 '22 at 09:31

I have modified your code and tested as requested in Question.(I tried explaining in points also as below, please let me know if any more questions.

Below is the link of updated code

https://stackblitz.com/edit/angular-ivy-ekuykb?file=src/app/child/child.component.ts

As per my thoughts Blow are the steps: step 1- send titleScreening to child component like this: <app-child (updateDataEvent)="updateData($event)" [titleScreening]="titleScreening"> step 2- receive it in child component with @input decorater step 3- use ngonchanges lifecyclehook to maintain previous and current value step4: with the help of existing @output event emitter send previous value i.e original value.

Radio button value from child to parent component - Angular

3 Answers3