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

CodePudding user response：

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

CodePudding user response：

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

Mistakes in your code:

1. 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);
    }
  }

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

Go through the code in the Updated Fiddle