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
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 :)
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>
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.