How to get and route the numbers of the otp from ng-otp-input using Ionic 4?

Issue

I created a numeric password form using otp input in page 1 and then on page 2 to confirm password. When I route the password from page 1 to page 2 I get the value of the password as undefined and I cannot modify it into a number because it is a string. How can I get the numbers I input into the otp to be able to route it to the second page?

page1.html

<ng-otp-input #ngOtpInput (onInputChange)="onOtpChange($event)" 
                      *ngIf="showOtpComponent"  [config]="{length:6,inputClass:'dot',allowNumbersOnly:true}"></ng-otp-input>

                      <span *ngIf="otp" class="o-t-p"></span>

page1.ts

export class Page1 {


val: any;

otp: string;
showOtpComponent = true;
@ViewChildren('ngOtpInput') ngOtpInput: any;

  constructor(public router:Router) { }

  ngOnInit() {

  }


  onOtpChange(otp) {

    this.otp = otp;

    if (otp.length === 6) {

    this.router.navigateByUrl('/page2/' + this.val);

    }

    }

setVal(val) {
 this.ngOtpInput.setValue(val);
 }




  }

page2.html

<ng-otp-input #ngOtpInput (onInputChange)="onOtpChange($event)" 
                      *ngIf="showOtpComponent"  [config]="{length:6,inputClass:'dot',allowNumbersOnly:true}"></ng-otp-input>

                      <span *ngIf="otp" class="o-t-p"></span>

page2.ts

export class page2 {
  val2: any;
  val: string;
  otp: string;
  showOtpComponent = true;
  @ViewChildren('ngOtpInput') ngOtpInput: any;

  constructor(private activatedRoute: ActivatedRoute, private router: Router, public alertController: AlertController) { }


  ngOnInit() {
    this.val = this.activatedRoute.snapshot.paramMap.get("val");
    console.log(this.val);
  }
  onOtpChange(otp) {

    this.otp = otp;
    if (otp.length === 6) {

      this.compare();

      }

    }

setVal(val2) {
 this.ngOtpInput.setValue(val2);
 }





 compare(){
  if(this.val != this.val2){
    this.presentAlert();
  }
  else{
    this.router.navigateByUrl('/page3');
  }
 }
 async presentAlert() {
  const alert = await this.alertController.create({
    header: 'Incorrect Password!!',
    message: 'Please enter the correct password',
    buttons: ['OK']
  });

  await alert.present();
}


}

Solution

Looking at your code it seems like in your Page1 you're never setting the value of val, therefore an undefined value is sent over the router.
Assuming you want to send the OTP value to Page2, you should modify your onOtpChange method in Page1 to the following:

onOtpChange(otp) {
    if (otp.length === 6) {
        this.router.navigateByUrl('/page2/' + otp);
    }
}

Now, in your router (assuming page2 route path is something like page2/:val), when you log the route param value you should see it properly displayed:

const val = this.activatedRoute.snapshot.paramMap.get("val");
console.log(val);

Answered By - Aziz Yokubjonov