Как скрыть окно по клику по области вне элемента (ANGULAR)?

Question

[Олег Морев]

Добрый вечер всем)
При клике по кнопки появляется окно, как его скрыть по клику по области? и еще с условием что в самом окне надо оставить возможность вызвать еще какие-то функции?
https://codesandbox.io/s/suspicious-mestorf-iz3hy

Answer 1

[the5x]

Как-то так
https://codesandbox.io/s/lively-water-vfi0s

Comments

[Олег Морев]

Подскажи плиз там надо чтобы кнопка внутри врапера была) можно так сделать?
у меня же кнопка будет внутри приложения) у меня в этом и затык что клик по кнопки, вызываешь попап, а потом кликаешь по области в которой и кнопка лежит. Надо оверлэй делать чтобы кнопку перекрывал и по нему уже клик ловить на закрытие?)
https://codesandbox.io/s/distracted-hertz-pr5ck

[the5x]

Олег Морев, я могу предложить такой вариант https://codesandbox.io/s/vigilant-worker-7ruwj
Если хотите, чтобы та же кнопка была всегда внутри этого враппера и при открытии и при закрытии, то на нее можно просто навесить absolute и z-index.

[Олег Морев]

the5x, Спасибо огромное!)

Answer 2

[Eduard07]

Пример с jQuery.... ссылка з нативным js, Как отработать клик вне блока?
jQuery(function($){
$(document).mouseup(function (e){ // событие клика по веб-документу
var div = $("#popup"); // тут указываем ID элемента
if (!div.is(e.target) // если клик был не по нашему блоку
&& div.has(e.target).length === 0) { // и не по его дочерним элементам
div.hide(); // скрываем его
}
});
});