0

I am trying do prevent any keyboard activity on Angular Mat Header. I want to block keyboard navigation, entering steps using header. I want to use buttons only How to stop any keyboard activity on that element as preventDefault() does not work.

public ngAfterViewInit(): void {
    this.elRef.nativeElement.querySelector('mat-step-
    header').addEventListener('keydown', (e) => {

      // What should go here?

    });
}
devDan
  • 5,969
  • 3
  • 21
  • 40
Andyally
  • 863
  • 1
  • 9
  • 22
  • have a look at [this](https://stackoverflow.com/questions/50022255/how-to-preventdefault-in-hostlistener-input-action) – Prashant Pimpale Nov 23 '18 at 14:12
  • I believe Hostlistener listens to window, document and body element. How can I taget specific element by ? – Andyally Nov 23 '18 at 14:30
  • You could try using a directive directly on the material component, also using event.stopPropagation() should do the trick [like this](https://stackblitz.com/edit/directivestopropagation?file=src/app/hello.component.ts) – Gabriel Lopez Nov 23 '18 at 15:52
  • I would like to avoid touching material component as it is part of modules and is used in other places as well. – Andyally Nov 23 '18 at 20:12

0 Answers0