当用户点击该下拉菜单之外的任何地方时，我想关闭我的登录菜单下拉菜单，并且我希望使用Angular2和Angular2＆＃34;方法＆＃34; ... < / p>
我已经实施了一个解决方案，但我真的对它没有信心。我认为必须有一种最简单的方法来实现相同的结果，所以如果你有任何想法......让我们讨论:)！
这是我的实施：
这是我的下拉列表的组件：
这是代码
export class UserMenuComponent {
_isVisible: boolean = false;
_subscriptions: Subscription<any> = null;
constructor(public subjects: SubjectsService) {
}
onClick(event) {
event.stopPropagation();
}
set isVisible(v) {
if( v ){
setTimeout( () => {
this._subscriptions = this.subjects.userMenu.subscribe((e) => {
this.isVisible = false;
})
}, 0);
} else {
this._subscriptions.unsubscribe();
}
this._isVisible = v;
}
get isVisible() {
return this._isVisible;
}
}
另一方面，有应用程序组件（它是下拉组件的父级）：
以下是代码：
export class AppComponent {
constructor( public subjects: SubjectsService) {
document.addEventListener('click', () => this.onClick());
}
onClick( ) {
this.subjects.userMenu.next({});
}
}
这个设置超时延迟订阅到当前JavaScript代码结束时解决了问题，但在我看来以非常优雅的方式。
如果您了解更清洁，更好，更智能，更快速或更强大的解决方案，请告诉我们:)！
答案 0 :(得分：213)
您可以使用(document:click)事件：
@Component({
host: {
'(document:click)': 'onClick($event)',
},
})
class SomeComponent() {
constructor(private _eref: ElementRef) { }
onClick(event) {
if (!this._eref.nativeElement.contains(event.target)) // or some similar check
doSomething();
}
}
另一种方法是将自定义事件创建为指令。看看Ben Nadel的这些帖子：
答案 1 :(得分：29)
我找到了这个clickOut指令：
https://github.com/chliebel/angular2-click-outside。我检查它，它运作良好（我只复制clickOutside.directive.ts到我的项目）。你可以这样使用它：
<div (clickOutside)="close($event)"></div>
当close是你的函数时，当用户点击div之外时将调用它。这是处理问题所描述问题的非常优雅的方式。
如果您使用above指令关闭popUp窗口，请记住首先将event.stopPropagation()添加到打开popUp的按钮单击事件处理程序。
下面我从文件clickOutside.directive.ts复制oryginal指令代码（如果链接将来会停止工作） - 作者是Christian Liebel：
import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';
@Directive({
selector: '[clickOutside]'
})
export class ClickOutsideDirective {
constructor(private _elementRef: ElementRef) {
}
@Output()
public clickOutside = new EventEmitter<MouseEvent>();
@HostListener('document:click', ['$event', '$event.target'])
public onClick(event: MouseEvent, targetElement: HTMLElement): void {
if (!targetElement) {
return;
}
const clickedInside = this._elementRef.nativeElement.contains(targetElement);
if (!clickedInside) {
this.clickOutside.emit(event);
}
}
}
答案 2 :(得分：18)
我这样做了。
在文档click上添加了一个事件监听器，并在该处理程序中检查了我的container是否包含event.target，如果没有 - 隐藏下拉列表。
看起来像这样。
@Component({})
class SomeComponent {
@ViewChild('container') container;
@ViewChild('dropdown') dropdown;
constructor() {
document.addEventListener('click', this.offClickHandler.bind(this)); // bind on doc
}
offClickHandler(event:any) {
if (!this.container.nativeElement.contains(event.target)) { // check click origin
this.dropdown.nativeElement.style.display = "none";
}
}
}
答案 3 :(得分：15)
我认为Sasxa接受了大多数人的答案。但是，我遇到了一种情况，即应该监听off-click事件的Element内容会动态更改。所以Elements nativeElement在动态创建时不包含event.target。 我可以使用以下指令解决这个问题
@Directive({
selector: '[myOffClick]'
})
export class MyOffClickDirective {
@Output() offClick = new EventEmitter();
constructor(private _elementRef: ElementRef) {
}
@HostListener('document:click', ['$event.path'])
public onGlobalClick(targetElementPath: Array<any>) {
let elementRefInPath = targetElementPath.find(e => e === this._elementRef.nativeElement);
if (!elementRefInPath) {
this.offClick.emit(null);
}
}
}
我没有检查elementRef是否包含event.target，而是检查elementRef是否在事件的路径（DOM目标路径）中。这样就可以处理动态创建的元素。
答案 4 :(得分：9)
我们今天在工作中遇到了类似的问题，试图弄清楚当点击它时如何让dropdown div消失。我们与最初的海报问题略有不同，因为我们不想点击其他组件或指令，但仅限于特别的div。
我们最终使用（window：mouseup）事件处理程序来解决它。
步骤：
1.）我们给整个下拉菜单div一个唯一的类名。
2.）在内部下拉菜单本身（我们想要点击不关闭菜单的唯一部分），我们添加了一个（window：mouseup）事件处理程序并传入$ event。
注意：不能用典型的＆＃34;点击＆＃34;处理程序，因为这与父单击处理程序冲突。
3.）在我们的控制器中，我们创建了我们想要在click out事件中调用的方法，并使用event.closest（docs here）来查看点击的点是否在我们的目标类中格。
autoCloseForDropdownCars(event) {
var target = event.target;
if (!target.closest(".DropdownCars")) {
// do whatever you want here
}
} <div class="DropdownCars">
<span (click)="toggleDropdown(dropdownTypes.Cars)" class="searchBarPlaceholder">Cars</span>
<div class="criteriaDropdown" (window:mouseup)="autoCloseForDropdownCars($event)" *ngIf="isDropdownShown(dropdownTypes.Cars)">
</div>
</div>
答案 5 :(得分：9)
touchstart事件：从Angular 4开始，HostListener装饰是首选的方法
import { Component, OnInit, HostListener, ElementRef } from '@angular/core';
...
@Component({...})
export class MyComponent implement OnInit {
constructor(private eRef: ElementRef){}
@HostListener('document:click', ['$event'])
@HostListener('document:touchstart', ['$event'])
handleOutsideClick(event) {
// Some kind of logic to exclude clicks in Component.
// This example is borrowed Kamil's answer
if (!this.eRef.nativeElement.contains(event.target) {
doSomethingCool();
}
}
}
答案 6 :(得分：4)
您可以在下拉列表中创建一个兄弟元素，该元素覆盖整个屏幕，该屏幕将是不可见的，仅用于捕获点击事件。然后，您可以检测该元素的点击次数，并在单击该按钮时关闭该下拉列表。让我们说元素是丝网印刷，这里有一些风格：
.silkscreen {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
z-index必须足够高才能将其定位在除下拉列表之外的所有内容上。在这种情况下，我的下拉列表将是z-index 2.
在某些情况下，其他答案对我有效，除非有时我的下拉菜单在我与其中的元素进行交互时关闭，而我并不想要这样做。根据事件目标，我动态添加了未包含在我的组件中的元素，就像我预期的那样。我认为我只是尝试丝网印刷方式，而不是整理那些混乱。
答案 7 :(得分：4)
我没有做任何解决方法。我刚刚附上了文档：点击我的切换功能，如下所示：
@Directive({
selector: '[appDropDown]'
})
export class DropdownDirective implements OnInit {
@HostBinding('class.open') isOpen: boolean;
constructor(private elemRef: ElementRef) { }
ngOnInit(): void {
this.isOpen = false;
}
@HostListener('document:click', ['$event'])
@HostListener('document:touchstart', ['$event'])
toggle(event) {
if (this.elemRef.nativeElement.contains(event.target)) {
this.isOpen = !this.isOpen;
} else {
this.isOpen = false;
}
}
所以，当我在指令之外时，我会关闭下拉列表。
答案 8 :(得分：4)
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'custom-dropdown',
template: `
<div class="custom-dropdown-container">
Dropdown code here
</div>
`
})
export class CustomDropdownComponent {
thisElementClicked: boolean = false;
constructor() { }
@HostListener('click', ['$event'])
onLocalClick(event: Event) {
this.thisElementClicked = true;
}
@HostListener('document:click', ['$event'])
onClick(event: Event) {
if (!this.thisElementClicked) {
//click was outside the element, do stuff
}
this.thisElementClicked = false;
}
}
缺点： - 页面上每个组件的两个单击事件侦听器。不要在页面上的组件上使用它数百次。
答案 9 :(得分：3)
正确的答案有问题，如果你的popover中有一个可辨认的组件，该元素将不再在contain方法上并将关闭，基于@ JuHarm89我创建了自己的：
export class PopOverComponent implements AfterViewInit {
private parentNode: any;
constructor(
private _element: ElementRef
) { }
ngAfterViewInit(): void {
this.parentNode = this._element.nativeElement.parentNode;
}
@HostListener('document:click', ['$event.path'])
onClickOutside($event: Array<any>) {
const elementRefInPath = $event.find(node => node === this.parentNode);
if (!elementRefInPath) {
this.closeEventEmmit.emit();
}
}
}
感谢您的帮助！
答案 10 :(得分：3)
我想补充@Tony的答案，因为在组件外部点击后没有删除该事件。完整收据：
使用#container
标记主要元素@ViewChild('container') container;
_dropstatus: boolean = false;
get dropstatus() { return this._dropstatus; }
set dropstatus(b: boolean)
{
if (b) { document.addEventListener('click', this.offclickevent);}
else { document.removeEventListener('click', this.offclickevent);}
this._dropstatus = b;
}
offclickevent: any = ((evt:any) => { if (!this.container.nativeElement.contains(evt.target)) this.dropstatus= false; }).bind(this);
在可点击元素上，使用：
(click)="dropstatus=true"
现在您可以使用dropstatus变量控制下拉状态，并使用[ngClass] ...
应用适当的类答案 11 :(得分：2)
您应该检查是否单击模态叠加层，更容易。
您的模板：
<div #modalOverlay (click)="clickOutside($event)" class="modal fade show" role="dialog" style="display: block;">
<div class="modal-dialog" [ngClass]='size' role="document">
<div class="modal-content" id="modal-content">
<div class="close-modal" (click)="closeModal()"> <i class="fa fa-times" aria-hidden="true"></i></div>
<ng-content></ng-content>
</div>
</div>
</div>
方法：
@ViewChild('modalOverlay') modalOverlay: ElementRef;
// ... your constructor and other method
clickOutside(event: Event) {
const target = event.target || event.srcElement;
console.log('click', target);
console.log("outside???", this.modalOverlay.nativeElement == event.target)
// const isClickOutside = !this.modalBody.nativeElement.contains(event.target);
// console.log("click outside ?", isClickOutside);
if ("isClickOutside") {
// this.closeModal();
}
}
答案 12 :(得分：2)
你可以写指令：
@Directive({
selector: '[clickOut]'
})
export class ClickOutDirective implements AfterViewInit {
@Input() clickOut: boolean;
@Output() clickOutEvent: EventEmitter<any> = new EventEmitter<any>();
@HostListener('document:mousedown', ['$event']) onMouseDown(event: MouseEvent) {
if (this.clickOut &&
!event.path.includes(this._element.nativeElement))
{
this.clickOutEvent.emit();
}
}
}
在您的组件中：
@Component({
selector: 'app-root',
template: `
<h1 *ngIf="isVisible"
[clickOut]="true"
(clickOutEvent)="onToggle()"
>{{title}}</h1>
`,
styleUrls: ['./app.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
title = 'app works!';
isVisible = false;
onToggle() {
this.isVisible = !this.isVisible;
}
}
当html元素包含在DOM中且[clickOut]输入属性为“true”时，此指令会发出事件。 它会监听mousedown事件，以便在从DOM中删除元素之前处理事件。
还有一个说明： firefox在事件上不包含属性'path'，您可以使用函数创建路径：
const getEventPath = (event: Event): HTMLElement[] => {
if (event['path']) {
return event['path'];
}
if (event['composedPath']) {
return event['composedPath']();
}
const path = [];
let node = <HTMLElement>event.target;
do {
path.push(node);
} while (node = node.parentElement);
return path;
};
所以你应该改变指令的事件处理程序： event.path应该替换为getEventPath（event）
这个模块可以提供帮助。 https://www.npmjs.com/package/ngx-clickout 它包含相同的逻辑，但也处理源html元素上的esc事件。
答案 13 :(得分：2)
@Tony伟大解决方案的更好版本：
@Component({})
class SomeComponent {
@ViewChild('container') container;
@ViewChild('dropdown') dropdown;
constructor() {
document.addEventListener('click', this.offClickHandler.bind(this)); // bind on doc
}
offClickHandler(event:any) {
if (!this.container.nativeElement.contains(event.target)) { // check click origin
this.dropdown.nativeElement.closest(".ourDropdown.open").classList.remove("open");
}
}
}
在css文件中：//如果使用bootstrap下拉，则不需要。
.ourDropdown{
display: none;
}
.ourDropdown.open{
display: inherit;
}
答案 14 :(得分：1)
我也做了一些自己的解决方法。
我创建了一个 （dropdownOpen） 事件，我在ng-select元素组件中监听并调用一个函数来关闭所有其他SelectComponent＆＃39; s在当前打开的SelectComponent之外打开。
我在 select.ts 文件中修改了一个函数，如下所示，以发出事件：
transpose.py在HTML中，我为（dropdownOpened）添加了一个事件监听器：
private open():void {
this.options = this.itemObjects
.filter((option:SelectItem) => (this.multiple === false ||
this.multiple === true && !this.active.find((o:SelectItem) => option.text === o.text)));
if (this.options.length > 0) {
this.behavior.first();
}
this.optionsOpened = true;
this.dropdownOpened.emit(true);
}
这是我在具有ng2-select标签的组件内的事件触发器上的调用函数：
<ng-select #elem (dropdownOpened)="closeOtherElems(elem)"
[multiple]="true"
[items]="items"
[disabled]="disabled"
[isInputAllowed]="true"
(data)="refreshValue($event)"
(selected)="selected($event)"
(removed)="removed($event)"
placeholder="No city selected"></ng-select>
答案 15 :(得分：1)
注意：对于那些想要使用网络工作者并且您需要避免使用文档和nativeElement的人来说，这将有效。
我在这里回答了同样的问题：https://stackoverflow.com/questions/47571144
从以上链接复制/粘贴：
我在制作下拉菜单和确认对话框时遇到了同样的问题，我想在外面点击时将其解雇。
我的最终实现完美无缺，但需要一些css3动画和样式。
注意：我还没有测试下面的代码，可能会有一些需要解决的语法问题，也是对你自己项目的明显调整！
我做了什么：
我制作了一个单独的固定div，高度为100％，宽度为100％，变换：scale（0），这实际上是背景，你可以用背景颜色设置它：rgba（0,0,0,0.466） ;显而易见，菜单是打开的，背景是点击关闭。 菜单获得的z-index高于其他所有菜单，然后背景div获得的z-index低于菜单，但也高于其他所有菜单。然后，后台有一个关闭下拉列表的点击事件。
这是你的HTML代码。
<div class="dropdownbackground" [ngClass]="{showbackground: qtydropdownOpened}" (click)="qtydropdownOpened = !qtydropdownOpened"><div>
<div class="zindex" [class.open]="qtydropdownOpened">
<button (click)="qtydropdownOpened = !qtydropdownOpened" type="button"
data-toggle="dropdown" aria-haspopup="true" [attr.aria-expanded]="qtydropdownOpened ? 'true': 'false' ">
{{selectedqty}}<span class="caret margin-left-1x "></span>
</button>
<div class="dropdown-wrp dropdown-menu">
<ul class="default-dropdown">
<li *ngFor="let quantity of quantities">
<a (click)="qtydropdownOpened = !qtydropdownOpened;setQuantity(quantity)">{{quantity }}</a>
</li>
</ul>
</div>
</div>
这是需要一些简单动画的css3。
/* make sure the menu/drop-down is in front of the background */
.zindex{
z-index: 3;
}
/* make background fill the whole page but sit behind the drop-down, then
scale it to 0 so its essentially gone from the page */
.dropdownbackground{
width: 100%;
height: 100%;
position: fixed;
z-index: 2;
transform: scale(0);
opacity: 0;
background-color: rgba(0, 0, 0, 0.466);
}
/* this is the class we add in the template when the drop down is opened
it has the animation rules set these how you like */
.showbackground{
animation: showBackGround 0.4s 1 forwards;
}
/* this animates the background to fill the page
if you don't want any thing visual you could use a transition instead */
@keyframes showBackGround {
1%{
transform: scale(1);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
如果你没有追求任何视觉效果，你可以使用像这样的过渡
.dropdownbackground{
width: 100%;
height: 100%;
position: fixed;
z-index: 2;
transform: scale(0);
opacity: 0;
transition all 0.1s;
}
.dropdownbackground.showbackground{
transform: scale(1);
}
答案 16 :(得分：1)
如果您使用的是Bootstrap，可以通过下拉菜单（Bootstrap组件）直接使用bootstrap方式进行。
<div class="input-group">
<div class="input-group-btn">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
Toggle Drop Down. <span class="fa fa-sort-alpha-asc"></span>
</button>
<ul class="dropdown-menu">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</div>
</div>
现在可以将(click)="clickButton()"内容放在按钮上。
http://getbootstrap.com/javascript/#dropdowns
答案 17 :(得分：1)
我已经发出指令来解决这个类似的问题，并且我正在使用Bootstrap。但就我而言，与其等待元素外部的click事件关闭当前打开的下拉菜单，不如让我关注“ mouseleave”事件以自动关闭菜单，这样更好。
这是我的解决方法：
指令
import { Directive, HostListener, HostBinding } from '@angular/core';
@Directive({
selector: '[appDropdown]'
})
export class DropdownDirective {
@HostBinding('class.open') isOpen = false;
@HostListener('click') toggleOpen() {
this.isOpen = !this.isOpen;
}
@HostListener('mouseleave') closeDropdown() {
this.isOpen = false;
}
}
HTML
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" appDropdown>
<a class="dropdown-toggle" data-toggle="dropdown">Test <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li routerLinkActive="active"><a routerLink="/test1">Test1</a></li>
<li routerLinkActive="active"><a routerLink="/test2/">Test2</a></li>
</ul>
</li>
</ul>
答案 18 :(得分：1)
您可以像这样在视图中使用mouseleave
使用角度8进行测试并完美运行
<ul (mouseleave)="closeDropdown()"> </ul>
答案 19 :(得分：1)
我决定根据我的用例发布我自己的解决方案。我在 Angular 11 中有一个带有（点击）事件的 href。这将主 app.ts 中的菜单组件切换为 off/
<li><a href="javascript:void(0)" id="menu-link" (click)="toggleMenu();" ><img id="menu-image" src="img/icons/menu-white.png" ></a></li>
菜单组件（例如 div）基于名为“isMenuVisible”的布尔值是可见的（*ngIf）。当然，它可以是下拉菜单或任何组件。
在 app.ts 我有这个简单的功能
@HostListener('document:click', ['$event'])
onClick(event: Event) {
const elementId = (event.target as Element).id;
if (elementId.includes("menu")) {
return;
}
this.isMenuVisble = false;
}
这意味着单击“已命名”上下文之外的任意位置将关闭/隐藏“已命名”组件。
答案 20 :(得分：0)
最优雅的方法：D
有一种最简单的方法，不需要任何指令。
“元素-切换您的下拉菜单”应为按钮标签。在（blur）属性中使用任何方法。就是这样。
<button class="element-that-toggle-your-dropdown"
(blur)="isDropdownOpen = false"
(click)="isDropdownOpen = !isDropdownOpen">
</button>
答案 21 :(得分：0)
我遇到了另一个解决方案，灵感来自具有焦点/模糊事件的示例。
因此，如果要在不附加全局文档侦听器的情况下实现相同的功能，则可以将以下示例视为有效。尽管它们具有按钮焦点事件的其他处理功能，但它也可以在OSx的Safari和Firefox中使用：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
角度为8的stackbiz上的工作示例：https://stackblitz.com/edit/angular-sv4tbi?file=src%2Ftoggle-dropdown%2Ftoggle-dropdown.directive.ts
HTML标记：
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" aria-haspopup="true" aria-expanded="false">Dropdown button</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
指令将如下所示：
import { Directive, HostBinding, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
@Directive({
selector: '.dropdown'
})
export class ToggleDropdownDirective {
@HostBinding('class.show')
public isOpen: boolean;
private buttonMousedown: () => void;
private buttonBlur: () => void;
private navMousedown: () => void;
private navClick: () => void;
constructor(private element: ElementRef, private renderer: Renderer2) { }
ngAfterViewInit() {
const el = this.element.nativeElement;
const btnElem = el.querySelector('.dropdown-toggle');
const menuElem = el.querySelector('.dropdown-menu');
this.buttonMousedown = this.renderer.listen(btnElem, 'mousedown', (evt) => {
console.log('MOUSEDOWN BTN');
this.isOpen = !this.isOpen;
evt.preventDefault(); // prevents loose of focus (default behaviour) on some browsers
});
this.buttonMousedown = this.renderer.listen(btnElem, 'click', () => {
console.log('CLICK BTN');
// firefox OSx, Safari, Ie OSx, Mobile browsers.
// Whether clicking on a <button> causes it to become focused varies by browser and OS.
btnElem.focus();
});
// only for debug
this.buttonMousedown = this.renderer.listen(btnElem, 'focus', () => {
console.log('FOCUS BTN');
});
this.buttonBlur = this.renderer.listen(btnElem, 'blur', () => {
console.log('BLUR BTN');
this.isOpen = false;
});
this.navMousedown = this.renderer.listen(menuElem, 'mousedown', (evt) => {
console.log('MOUSEDOWN MENU');
evt.preventDefault(); // prevents nav element to get focus and button blur event to fire too early
});
this.navClick = this.renderer.listen(menuElem, 'click', () => {
console.log('CLICK MENU');
this.isOpen = false;
btnElem.blur();
});
}
ngOnDestroy() {
this.buttonMousedown();
this.buttonBlur();
this.navMousedown();
this.navClick();
}
}
答案 22 :(得分：0)
这是在组件外部关闭的 Angular Bootstrap DropDowns 按钮示例。
不使用bootstrap.js
// .html
<div class="mx-3 dropdown" [class.show]="isTestButton">
<button class="btn dropdown-toggle"
(click)="isTestButton = !isTestButton">
<span>Month</span>
</button>
<div class="dropdown-menu" [class.show]="isTestButton">
<button class="btn dropdown-item">Month</button>
<button class="btn dropdown-item">Week</button>
</div>
</div>
// .ts
import { Component, ElementRef, HostListener } from "@angular/core";
@Component({
selector: "app-test",
templateUrl: "./test.component.html",
styleUrls: ["./test.component.scss"]
})
export class TestComponent {
isTestButton = false;
constructor(private eleRef: ElementRef) {
}
@HostListener("document:click", ["$event"])
docEvent($e: MouseEvent) {
if (!this.isTestButton) {
return;
}
const paths: Array<HTMLElement> = $e["path"];
if (!paths.some(p => p === this.eleRef.nativeElement)) {
this.isTestButton = false;
}
}
}
答案 23 :(得分：0)
我认为没有足够的答案，所以我想参与其中。这就是我所做的
component.ts
@Component({
selector: 'app-issue',
templateUrl: './issue.component.html',
styleUrls: ['./issue.component.sass'],
})
export class IssueComponent {
@Input() issue: IIssue;
@ViewChild('issueRef') issueRef;
public dropdownHidden = true;
constructor(private ref: ElementRef) {}
public toggleDropdown($event) {
this.dropdownHidden = !this.dropdownHidden;
}
@HostListener('document:click', ['$event'])
public hideDropdown(event: any) {
if (!this.dropdownHidden && !this.issueRef.nativeElement.contains(event.target)) {
this.dropdownHidden = true;
}
}
}
component.html
<div #issueRef (click)="toggleDropdown()">
<div class="card card-body">
<p class="card-text truncate">{{ issue.fields.summary }}</p>
<div class="d-flex justify-content-between">
<img
*ngIf="issue.fields.assignee; else unassigned"
class="rounded"
[src]="issue.fields.assignee.avatarUrls['32x32']"
[alt]="issue.fields.assignee.displayName"
/>
<ng-template #unassigned>
<img
class="rounded"
src="https://img.icons8.com/pastel-glyph/2x/person-male--v2.png"
alt="Unassigned"
/>
</ng-template>
<img
*ngIf="issue.fields.priority"
class="rounded mt-auto priority"
[src]="issue.fields.priority.iconUrl"
[alt]="issue.fields.priority.name"
/>
</div>
</div>
<div *ngIf="!dropdownHidden" class="list-group context-menu">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a
href="#"
class="list-group-item list-group-item-action disabled"
tabindex="-1"
aria-disabled="true"
>A disabled link item</a
>
</div>
</div>