get values from child component to parent component

Question

I am trying to pass values from a child component to a parent component. My component are name details component which is the parent and password component which is the child. The values I need is the password and the otp. Note that the otp is not part of the form control.

Here is my code

Password component form

<form [formGroup]="passwordForm">
  <div class="password" *ngIf="!showOTP">
    <label>Password</label>
    <input type="password" formControlName="password" placeholder="Should be 8 characters long">
  </div>
  <div class="confirmPassword" *ngIf="!showOTP">
    <label>Confirm password</label>
    <input type="password" formControlName="confirmPassword" placeholder="Should be 8 characters long">
  </div>
  <div class="otp" *ngIf="showOTP">
    <label>OTP</label>
    <input type="text" placeholder="Enter OTP">
  </div>
</form>
<button *ngIf="!showOTP" (click)="passwordsConfirmed()" class="secondary small"> Send OTP </button>
<button *ngIf="showOTP" (click)="onUpdatePassword()" class="secondary small"> UPDATE PASSWORD</button>

Password component ts

  @Output() changePassword = new EventEmitter<string>();
  @Output() otp = new EventEmitter<string>();

passwordsConfirmed(){
  this.password = this.passwordForm.controls.password.value;
  this.confirmPassword = this.passwordForm.controls.confirmPassword.value;

  if (this.passwordForm.valid && this.password === this.confirmPassword) {
    this.changePassword.emit(this.password);
    this.showOTP = !this.showOTP;
  } else {
    this._errorService.openErrorPopup('Please enter valid matching passwords.');
  }
}

  onUpdatePassword() {
    this.otp.emit(this.otpFieldValue);
  }

details div

  <div class="ui-g-4">
    <app-profile-change-password
      (changePassword)="onChangePassword($event)"
    ></app-profile-change-password>
    <div class="button-container">
      <button class="main right" (click)="onSaveChanges()">
        SAVE CHANGES
      </button>
    </div>
  </div>

details component ts

  onChangePassword() {
    this._profileService.resendAFOPin(this.username, 'mobile')
      .subscribe((resp) => {
        this._notificationService
          .openNotification('Access code has been sent. An sms has been sent to the new user');
          console.log(this.confirmPassword);
      }, (error) => {
        this._errorService.openErrorPopup('Failed to send code.');
      });
  }

  private changePassword() {
    this._confirmationService.confirm({
      header: 'Change password',
      message: 'Are you sure you want to update your password?',
      acceptLabel: 'YES, UPDATE',
      rejectLabel: 'NO, CANCEL',
      icon: null,
      accept: () => {
        this._profileService.completePasswordChange(this.username, 'otp','mobile')
        .subscribe((resp) => {
          this._notificationService
            .openNotification('Password has been changed.');
        }, (error) => {
          this._errorService.openErrorPopup('Failed to update password.');
        });
      }
    });
  }

How would I now get the 2 values in the details component?

Answer 1

You are getting otp undefined since you are only binding for change password. Do same for otp :

<app-profile-change-password (otp)="otpChanged($event)"
      (changePassword)="onChangePassword($event)">
</app-profile-change-password>

Define your own otpChanged()