title: How To Install Angular2 click-outside Dependency?
body: <p>hello every one i'm trying to trigger a <code>clickOutside</code> event. in my app i show a div when the variable <code>show == true</code> but when i show it i can't hide it again when i click any where else so i tried to use <code>clickOutside</code></p>
  
  <p>i used the following command from this page <a href="https://www.npmjs.com/package/angular2-click-outside" rel="nofollow noreferrer">angular2-click-outside </a></p>
  
  <pre><code>npm i angular2-click-outside
  </code></pre>
  
  <p>and in my component</p>
  
  <pre><code>      &lt;div class="row hidden_one" (clickOutside)="close()"&gt;
  </code></pre>
  
  <p>this is my html page</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row wrapper"&gt;
    &lt;div class="col-lg-8 col-md-8 col-sm-9 first"&gt;
    &lt;input type="text" class="form-control title" placeholder="{{placeholder}}" #task&gt;
  &lt;/div&gt;
  &lt;div class="col-lg-4 col-md-4 col-sm-3 second hiddden"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"&gt;
        &lt;input type="text" class="form-control right" value="00:00:00" (click)="showdiv()" [(ngModel)]="timer" #time&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 font"&gt;
        &lt;i class="fa fa-play-circle fa-3x first" aria-hidden="true" *ngIf="play" (click)="startPause()"&gt;&lt;/i&gt;
        &lt;i class="fa fa-stop-circle fa-3x second" aria-hidden="true" *ngIf="pause" (click)="startPlay(task.value, time.value)"&gt;&lt;/i&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row hidden_one" (clickOutside)="close()"&gt;
      &lt;div class="start-end" *ngIf="show" (clickOutside)="hide($event)"&gt;
        &lt;div class="col-lg-6"&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="Start"&gt;Start&lt;/label&gt;&lt;br&gt;
            &lt;input type="text" class="form-control" class="startTime" value="{{startTime}}" #val (blur)="validate(val.value)"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-6"&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="Start"&gt;Stop&lt;/label&gt;&lt;br&gt;
            &lt;input type="text" class="form-control" class="startTime" [(ngModel)]="stopTime" [disabled]="pause"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <p>and this is my ts code</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { timeInterface } from './timeInterface';
  import { timesList } from './times-list-component';
  import { TimeService } from './time-service';
  import * as moment from 'moment';
  
  @Component({
   selector: 'my-app',
   templateUrl: './html/app-component.html',
   styleUrls: ['./css/app-component.css']
  </code></pre>
  
  <p>})</p>
  
  <pre><code>export class AppComponent  { 
     placeholder:string = "What are you working on?";
     play:boolean = true;
   pause:boolean = false;
   show:boolean=false;// For Showing The Hidden Div
   countup:any;
   timeSum :any;
   timer:string = "00:00:00";
   // hidden Div Start Time
   startTime: any;
   stopTime: any;
   bs:any;
   bbs:any;
   // Array to Hold The Tasks With Time
   tasks:timeInterface[] =[];
  
   constructor(private timeService:TimeService) {}
  
   startPause() {// when click on play button
     // this.bs = moment();
     // this.startTime = this.bs.format('hh:mm A');
     // this.play = false;
     // this.pause = true;
  
     // let sec= 0;
     // let min = 0;
     // let hour = 0;
     //  this.countup = setInterval(() =&gt; {
     //   if(sec === 59) {
     //     min++;
     //     sec = 0;
     //   }else if(min &gt; 59) {
     //     hour++;
     //     min = 0;
     //   }else {
     //     sec++;
     //   }
     //   this.timer = `${this.pad(hour)}:${this.pad(min)}:${this.pad(sec)}`;
     // }, 1000);
    this.timeService.startPause();
   }
  
   startPlay(name:string, time:any) {
     this.play = true;
     this.pause = false;
     this.timer = "00:00:00";
     clearInterval(this.countup);
     //push the task to array
     if(name == "") {
       // this.placeholder = "(no description)";
       name = "Add description";
       this.tasks.push({title: name, time: time});
     } else {
       name = name;
       this.tasks.push({title: name, time: time});
     }
  
   }
  
   pad(num:number, size:number=2): string { // to add zero before sec if it &lt; 
     10
      var s = num+"";
     while (s.length &lt; size) s = "0" + s;
     return s;
   }
   //Show the hidden div
   showdiv() {
     this.bbs = moment();        
     //console.log(moment(this.bbs.diff(this.bs, 
    'hh:mm:ss')).format('hh:mm:ss'));
     this.show = true;
     this.stopTime = this.bbs.format('hh:mm A');
     if(!this.pause) {
       this.startTime = this.stopTime
     }
   }
  // Validate input value
    validate(val:string) {
     let temp =this.startTime;
     let parsedTime = moment(val, "hh:mm A");
     if(parsedTime.isValid()) {
     this.startTime = parsedTime.format('hh:mm A')
     } else {
      this.startTime = "temp";
      console.log("no"); 
    } 
   }
  close() {// to hide the pop up div
    console.log('Clicked outside:');
    this.show = false
   }
  }
  </code></pre>
  
  <p>and when i log console there is no thing there i seems that the event doesn't work so any help .thx in advance</p>