This is a basic starter project contains the Click-Outside directive. This directive is for detecting clicks outside of a DOM element where the directive is placed on.

See: https://embed.plnkr.co/m6QXd3EQSGfPg8tiIe0y/

Unlike many other click-outside detecting techniques (usually some kind of DOM traversing), this directive will detect the outSide click using DOM event bubbling.

##Explenation If an click event is triggered within our component it will bubble up all the way up the DOM, passing our Host element, till it reaches the Document root level. As seen below, we are binding to the Element:click, and to the Document:click. Element click: If we click from inside the Element, the 1st method to be called is the trackEvent(event)- where we save a reference to the event. Document click: Every click will eventually (unless stopped - highly not recommended https://css-tricks.com/dangers-stopping-event-propagation/ ) will reach the document level. At that point we compare to see if the event passed the Element Host component.

@Directive({
    selector: '[clickOutside]',
    host: {
        "(click)": "trackEvent( $event )",            // save a reference to the event click
        "(document: click)": "compareEvent( $event )" // compare the event that bubbled up to the one we save in the trackEvent method
    }
})

Track user click from inside the bound target We use this to track the click Event when it bubbles up the DOM tree

   trackEvent(event){
        // private @localEvent to keep ref of the event we clicked
        this.localEvent = event; 
    }

Compare event at the Document level to a reference of the Element:click This method triggers when we are on Document level - Document was clicked or event bubbling If the Document click DON'T MATCH the Event:click reference => than the click is from outside of the Element

   compareEvent(event){
        if ( event !== this.localEvent ) {
            this.clickOutside.emit( event );
        }
        this.localEvent = null;
    }

To use this project please do the following steps;

• Clone the project

git clone https://github.com/giladym/angular2-click-outside-directive

• Install all the dependencies

npm install

• Run the app

npm start

Keep in mind that the app, view and style folder are created when starting/compiling the app. Please also make sure you have NodeJs installed.

For the directive heavily inspired by: [Ben Nadel] (http://www.bennadel.com/blog/3009-tracking-click-events-outside-the-current-component-in-angular-2-beta-1.htm)