Angular2: Directives: capturing click event on children

Question

I know it must be something very simple, but cannot figure it today - Monday :)

so, I have a directive for a responsive table

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

@Directive({
    selector: '.table-responsive'
})
export class TableResponsiveDirective {

    @HostListener('click', ['$event']) scroll(direction: string, event: MouseEvent){
        console.info('clicked: ' + direction + ' ' +event);
        event.stopPropagation();
        event.preventDefault();
    }
}

and this is my view

<div class="table-responsive">
    <a href="#" (click)="scroll('left', $event)">LEFT</a>
    <a href="#" (click)="scroll('right', $event)">RIGHT</a>
    <table>...</table>
</div>

Now, how do I make it work? I don't want to capture the whole .table-responsive... but just those two links

Answer 1

Don't want to go in depth but this will be a quick solution for you. Try to bind your left, right information with event, bind it inside with event like this

<div class="table-responsive">
 <a href="#" (click)="$event.left = true">LEFT</a>
 <a href="#" (click)="$event.right = true">RIGHT</a>
 <table>...</table>
</div>

extract it like this

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

@Directive({
 selector: '.table-responsive'
})
export class TableResponsiveDirective {

 @HostListener('click', ['$event'])
 scroll($event){
    if ($event.left) {
     console.info('clicked: ' + $event.left);
    } else if ($event.right) {
     console.info('clicked: ' + $event.right);
    }
    event.stopPropagation();
    event.preventDefault();
 }
}

In this case you can simply know the direction by left, right flags in event object and add your code :)

Answer 2

Thanks @Babar Bilal, based on your answer, I did a more polished solution (for my needs)

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

interface tableMouseEvent extends MouseEvent{
    direction: string
}

@Directive({
    selector: '.table-responsive'
})
export class TableResponsiveDirective {

    @HostListener('click', ['$event'])
    scroll(event: tableMouseEvent){
        if(event.direction){
            console.info('clicked: ' + event.direction);
            event.stopPropagation();
            event.preventDefault();
        }
    }
}

and the view

<div class="table-responsive">
    <a href="#" (click)="$event.direction='left'">LEFT</a>
    <a href="#" (click)="$event.direction='right'">RIGHT</a>
</div>

Answer 3

In angular 8 and higher versions, the component template works like this:

<div class="table-responsive">
    <a href="#" (click)="$any($event).direction='left'">LEFT</a>
    <a href="#" (click)="$any($event).direction='right'">RIGHT</a>
</div>

Otherwise might run into the problem: error TS2339: Property 'direction' does not exist on type 'MouseEvent'.

The $any typecast function $any($event.target).value is used to stop the type checking in the template. details angular doc