Creating a custom directive named is-login.directive
<button type="button" appIsLogin (click)="sayHello()">
down
</button>
In the component:
sayHello() {
console.log('clicked');
}
File: is-login.directive.ts
import {Directive, HostListener} from '@angular/core';
@Directive({
selector: '[appIsLogin]'
})
export class IsLoginDirective {
isLoggedIn = false;
constructor() {
}
@HostListener('mousedown', ['$event'])
onClick(event: Event): boolean {
if (!this.isLoggedIn) {
console.log('mousedown');
event.preventDefault();
event.stopPropagation();
return false;
}
return true;
}
Current behavior: When the button is clicked, both events are triggered. The desired outcome is for only the mouse down event to occur.
The aim is to monitor the user's click event using the directive. If the user is not logged in, prevent the execution of the click event.