Angular Ctrl click?
HTML
<input ng-click="some_function($event)"/>
JS
$scope.some_function = function(event){ if (event.ctrlKey) { // logic here }}
You have to create your own ctrl-click directive. To do this, navigate to your "directives" folder in your editor and create ones.
You can do it by terminal writting:
ng generate directive ctrl-click
Once created, you have to edit it like following:
import { Directive, ElementRef, EventEmitter, OnDestroy, OnInit, Output, Renderer2 } from '@angular/core';@Directive({ // tslint:disable-next-line:directive-selector selector: '[ctrl-click]',})export class CtrlClickDirective implements OnInit, OnDestroy { private unsubscribe: any; // tslint:disable-next-line:no-output-rename @Output('ctrl-click') ctrlClickEvent = new EventEmitter(); constructor(private readonly renderer: Renderer2, private readonly element: ElementRef) {} ngOnInit() { this.unsubscribe = this.renderer.listen(this.element.nativeElement, 'click', event => { if (event.ctrlKey) { event.preventDefault(); event.stopPropagation(); // unselect accidentally selected text (browser default behaviour) document.getSelection().removeAllRanges(); this.ctrlClickEvent.emit(event); } }); } ngOnDestroy() { if (!this.unsubscribe) { return; } this.unsubscribe(); }}
If there is a conflict with "spec.ts" file, you can comment its constructor.
Finally, you need to add to app.modules.ts file if it has not been added automatically:
import { CtrlClickDirective } from './shared/directives/ctrl-click.directive';@NgModule({imports: [ ... CtrlClickDirective],
And then, you can use it in your html files.
NOTE: You can not add listeners for both (click) and (ctrl-click) on the same element. The (click) event will fire every time. If you need both event listeners, then you need to nest them, like this:
<a (click)="this.openSomething(params...)" style="cursor: pointer"> <span (ctrl-click)="this.openSomethingNewTab(params...)">New Tab</span></a>
This should work fine, I hope I help you.