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?

Does this answer your question? [How to Pass data from child to parent component Angular](https://stackoverflow.com/questions/42107167/how-to-pass-data-from-child-to-parent-component-angular) — ihor.eth, Aug 27 '20 at 00:46

ng-hobby · Answer 1 · 2020-08-26T22:34:15.443

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.

Child to Parent Communication with @output()

1 Answers1