Enter key press on Angular Stepper-CodePudding

I my Application on Enter Key press i want to Throw Stepper 1 form on second stepper. I am not able to throw the stepper 1 form on second Stepper on enter key press. My Ques - How to access EventListner keyUp or Keydown to access next step in stepper? I am new to angular can anyone help me out year.


    <mat-step [stepControl]="firstFormGroup">
          <form [formGroup]="firstFormGroup">
            <ng-template matStepLabel>Step 1</ng-template>
            <div >
              <div ></div>
              <div >
                <div >
                <div >
                  <div >
                    <div >
                      <label for="inputFirstName">Full Name <span style="color:red;">*</span>
                      </label>
                      <input type="text"  onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)" name="fname" id="inputFirstName" formControlName="firstNameCtrl"
                        (change)="ChangeStudentNamePop()"
                        [ngClass]="{'form-control-danger': firstFormGroup.controls.firstNameCtrl.invalid && (firstFormGroup.controls.firstNameCtrl.dirty || firstFormGroup.controls.firstNameCtrl.touched)}"
                        placeholder="Full Name" autocomplete="given-name" autofocus required>
                    </div>
                  </div>
                </div>
                <div >
                  <div >
                    <div >
                      <label for="inputFatherName">Father's Name <span style="color:red;">*</span>
                      </label>
                      <input type="text"  onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)" name="fatherName" id="inputFatherName" formControlName="fatherNameCtrl"
                      [ngClass]="{'form-control-danger': firstFormGroup.controls.fatherNameCtrl.invalid && (firstFormGroup.controls.fatherNameCtrl.dirty || firstFormGroup.controls.fatherNameCtrl.touched)}"
                      placeholder="Father's Name" autocomplete="father-name" autofocus required>
                    </div>
                  </div>
                  <div  id="top_help">
                  <p style="font-size: 150%"><b>Need Help?</b></p>
                  <img   src="https://dte.admissiondesk.org/api/front_assets/img/PLAY.png" data-toggle="modal" data-width="640" data-height="360" data-target="#myModal" data-video-fullscreen=""  (click)="videoPopup(1)">
                  <br>
                  <h5>Email Us on <a style="color:#0054ff">info</a></h5>
              </div>
            </div>
            <br>
            <br>
            <div >
              <div >
                <a   *ngIf="firstFormGroup.valid == true" (click)="radioChange();">
                  <mat-icon >arrow_forward</mat-icon>
                </a>
              </div>
            </div>
          </form>
        </mat-step>

     //Second Stepper :
    <mat-step [stepControl]="secondFormGroup">
          <form [formGroup]="secondFormGroup">
     //Code year.
    <mat-step>


    radioChange(event) {
            if(event){
                if(event=='Male'){
                    this.initials_gender = "Mr.";
                }else if(event=='Female'){
                    this.initials_gender = "Ms.";
                }else if(event=='Transgender'){
                    this.initials_gender = "";
                }
                this.secondFormGroup.patchValue({
                    genderCtrl : event
                })
            }
            this.stepper.next();
        }

CodePudding user response：

You can use @HostListener

@HostListener('window:keyup', ['$event'])
  keyEvent(event: KeyboardEvent) {
    if (event.keyCode === LEFT_ARROW) {
      // write your code
    }
    if (event.keyCode === RIGHT_ARROW) {
      // write your code
    }
    if (event.keyCode === ENTER) {
      // write your code
    }
  }