How do I know when a directive is called in submit btn?

Question

I'm looking for a way to tell when a directive is called when I click the submit button.

I have a directive that listens when a user selects a keyboard short cut.

How am I able to tell if the short cut was triggered using the directive?

//Directive
@Directive({
   selector: [shortcut]
})
export class shortCutDirective{
    @HostListener('window:keyup', ['event'])
    if(event.keyCode == 32){
       console.log('short cut triggered');
    }
}

@Component({
  selector: 'app-root',
  template: `      
      <ng-template>
          <form ngSubmit = login() [shortcut]> 
              <button type = submit>
                      <span>Login </span>
              </button>
      </ng-template>
  `})
export class AppComponent {
    login() {
        console.log('Login');
    }

    loginByShortCutMethod() {
        console.log('Short cut was used');
    }
}

Answer 1

So you are checking with spacebar, right? keycode == 32. Just for testing purposes make it on click or hover to see its console logging or not.

And also just use the attribute with name no binding, remove the square brackets, like the following:

<form ngSubmit = login() shortcut>