How to Disable/Stop HostListener if any document is opened before mat stepper?

Anuj Todankar

In my Application i am using Mat stepper. I am Listening Keyword 'Enter' and saving the form and redirecting to next step. My ques is let say on stepper 4 i have two buttons Add and edit let say i clicked edit it opens Short window of document before stepper 4 to edit form and on click enter it saves the data and close the document viewer same time stepper also listens the enter Keyword and goes to next step. I want to disable HostListener if any document is opened.

@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
  if (event.key == 'Enter') {
    if (this.selectedStepper == '0') {
      if (this.firstForm.valid) {
        console.log('Stepper 1', this.fifthForm.valid)
        this.onFirstSubmit()
        this.stepper.next()
      } else {
        this.toastrService.danger('Incomplete Form', 'Message')
      }
    } else if (this.selectedStepper == '1') {
      if (this.secondForm.valid) {
        console.log('Stepper 2', this.secondForm.valid)
        this.onSecondSubmit(this.country_birth)
        this.stepper.next()
      } else {
        this.toastrService.danger('Incomplete Form', 'Message')
      }
    } else if (this.selectedStepper == '2') {
      if (this.thirdForm.valid) {
        console.log('Stepper 3', this.thirdForm.valid)
        this.onThirdSubmit()
        this.stepper.next()
      } else {
        this.toastrService.danger('Incomplete Form', 'Message')
      }
    } else if (this.selectedStepper == '3') {
      if (this.fourthForm.valid) {
        console.log('Stepper 4', this.fourthForm.valid)
        this.onFourthSubmit()
        // this.stepper.next();
      } else {
        this.toastrService.danger('Incomplete Form', 'Message')
      }
    } else if (this.selectedStepper == '4') {
      if (this.fifthForm.valid) {
        console.log('Stepper 5', this.fifthForm.valid)
        this.onFifthSubmit()
        this.stepper.next()
      } else {
        this.toastrService.danger('Incomplete Form', 'Message')
      }
    } else if (this.selectedStepper == '5') {
      if (this.profileCompleteness == true) {
        console.log('Stepper 6')
        this.quickApply()
      } else {
        this.toastrService.danger('Incomplete Form', 'Message')
      }
    }
  }
}

stepperCalled(event) {
  this.selectedStepper = event.selectedIndex
}
<div class="Rtable-cell--heading">Add/Edit</div>
<div class="Rtable-cell--content date-content" *ngIf="showEdit == false && showOpenEdit == false">
  <button nbButton *ngIf="addDegree" (click)="open(1)">Add</button>
  <button nbButton *ngIf="editDegree" (click)="open(1)">Edit</button>
</div>
onFourthSubmit(){
  console.log(this.fourthForm.valid);
  var error = this.findInvalidControls();
  // console.log(JSON.stringify(error))
  if(this.fourthForm.valid){

    this.stepper.next();
    }
}
open(EducationalDialogNo) {
  // SSC/CBSC dialogs validation commented as ssc not required
  if (EducationalDialogNo == 1) {
      console.log("EducationalDialogNo == 1");
      this.dialogService.open(FirstDialogComponent).onClose.subscribe((data: any) => {
          if (data !== undefined) {
              this.cbse.university = data.sscUniversity;
              this.cbse.school_name = data.sscCollege;
              this.cbse.result_date = data.sscResultDate;
              this.cbse.school_marks = data.sscMarks;
          }
          // this.stepper.stop();
          err => console.error(err)
      });
  } else if (EducationalDialogNo == 2) {
             //Code yrr
  }
 }
Raphaël Balet

How to deactivate the HostListener? Sorry I don't know, not even sure if this is doable since this is, at the moment of writing, a feature request

But a workaround could be :

  1. Creating a variable (if those method aren't in the same component, do create it in a service).
  2. Controlling, when the keydown get triggered, if you have a dialog open
  3. If yes, do nothing
isDialogOpen = false

@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
  if(this.isDialogOpen) return
  // Your code
}

open(EducationalDialogNo) {
  // SSC/CBSC dialogs validation commented as ssc not required
  if (EducationalDialogNo == 1) {
    this.isDialogOpen = true
    console.log('EducationalDialogNo == 1')
    this.dialogService.open(FirstDialogComponent).onClose.subscribe((data: any) => {
      this.isDialogOpen = false
      if (data !== undefined) {
        this.cbse.university = data.sscUniversity
        this.cbse.school_name = data.sscCollege
        this.cbse.result_date = data.sscResultDate
        this.cbse.school_marks = data.sscMarks
      }
      // this.stepper.stop();
      ;(err) => console.error(err)
    })
  } else if (EducationalDialogNo == 2) {
    //Code yrr
  }
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to hide mat-stepper header in my mat-stepper?

How to show that the last mat-step is complete in mat-stepper?

How to change the angular material mat stepper label color?

How to replace next button with mat-chip in Angular Material stepper?

How to connect Powershell script to an already opened document?

Angular Material: How to set each mat-horizontal-stepper stepper icon with different background color in TS

How to change angular material stepper step numbers to any icon or text?

How to keep opened mat-datepicker after choosing date?

mat stepper bar is not in the npm registry

How don't autostart all programs, that was opened before shut down

How can I enable scrolling of the parent document while fancybox is opened?

How can I close an opened HTML document in Android application?

How to manipulate a Word 2013 document opened in read only mode

Using mat-menu as context menu: How to close opened mat-menu, and open it in another location

jQuery - how to hide an element if ANY of the activating elements are opened?

Angular Material Mat-Stepper: How to use the same formgroup for multiple steps?

How to show default icons instead 'done' icon in angular mat-stepper

Any PDF reader which remembers at which page the document was opened last time?

How can I capture any scroll event from an element on the page using HostListener (Angular 7)?

How to create a copy of a document before saving with Mongoose?

How to verify embedded document before saving?

How to load loading script before html document

How to add a field to the document which is created before?

Angular How to test @HostListener

How to use HostListener

Mat stepper done icon is out of circle

Disable animation of mat-stepper while in transition

How to execute Run function before any controller

In javascript, how to eliminate any focus in the document?