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 verify embedded document before saving?

How to use HostListener

Angular How to test @HostListener

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

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

Disable animation of mat-stepper while in transition

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

How to connect Powershell script to an already opened document?

How to change the angular material mat stepper label color?

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

How to keep opened mat-datepicker after choosing date?

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

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

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

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

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

Mat stepper done icon is out of circle

mat stepper bar is not in the npm registry

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

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

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

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

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

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

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

How to load loading script before html document

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

How to control mat-stepper navigation between steps without Linear mode?

How to test mat-stepper with Cypress