Child to Parent Communication with @output()

Question

I have a form in my Parent Component which has a hidden input for new password and an edit password button.

In the Child Component by clicking on the edit password button, a matdialog will be loaded and to enter enter new password and save. Since this is in a different form I should pass it to the Parent Component .

Can anyone help for this child to parent communication?

Child Component

@Output() editedPassword = new EventEmitter<String>();
  saveButtonClick(){
    this.editedPassword.emit(this.myform.get('password').value);
  }

How can I pass this value to the parent component?

Answer 1

Try this:

Child Component

@Output() editedEvent = new EventEmitter<String>();
  saveButtonClick(){
    this.editedEvent.emit(this.myform.get('password').value);
  } 

Parent HTML

<child-app (editedEvent)="eventHandler($event)"></child-app>

Parent Component

public newPassword: string = '';

eventHandler($event) {
  this.newPassword = $event;
}

You can also see a complete example here .

In addition there is a complete explanation about Angular child-parent communication in this answer on Stackoverflow .