Block Click Events in Angular

env.ts

import { Directive, HostListener} from '@angular/core';

@Directive({
    selector: '[noClickable]'
})
export class ComponentLockDirective {

    constructor() { }

    @HostListener('click', ['$event'])
    public onClick(event: any): void {
        event.stopPropagation();   
    }
}

useIt.html

<div noClickable> bitch can not click me </div>