Check for multiple events to execute a command in Angular

Question

I want to change value of a Boolean variable in Angular when a user clicks out of a div box. For this I think I should bind the variable with (mouseleave) and (click) i.e if both the events occur than only value changes. Here Boolean variable is isOpen in .component.html my code is like this.

<div id="box1">

<!--div content-->

</div>

In div box1 I want to close it if we click out of it.How can I do this?
Below is the TypeScript code for it.

import {
    Component,
    OnInit
} from '@angular/core';

@Component({
    selector: 'service-box',
    templateUrl: './service-box.component.html',
    styleUrls: ['./service-box.component.scss']
})
export class ServiceBoxComponent implements OnInit {
    public isOpen = false;

    constructor() { }

    ngOnInit() {
    }
}

Possible duplicate of [How can I close a dropdown on click outside?](https://stackoverflow.com/questions/35712379/how-can-i-close-a-dropdown-on-click-outside) — Ilia Volk, Mar 11 '18 at 23:19

score -1 · Answer 1 · answered Mar 11 '18 at 15:16

-1

it fairly easy for your html add a directive call ng-click

<div id="box1" ng-click="yourFunction()"> </div>

and in your js

$scope.yourFunction(){
mouseleave = true;
}

same thing with the directive ng-mouseleave https://docs.angularjs.org/api/ng/directive/ngMouseleave https://docs.angularjs.org/api/ng/directive/ngClick

answered Mar 11 '18 at 15:16

Yassine Laadraoui

78
1
10

Thanks for your answer,but I am working with Angular not AngularJs. – bro33 Mar 11 '18 at 15:26

Check for multiple events to execute a command in Angular

1 Answers1