Creating own datepicker in Angular4 application

I am creating my own datepicker and I'm struggling with a problem. I have a function named toggleShowCalendar() and I call it when user clicks an calendar icon. This function makes a div visible on the page.

The problem appears when user wants to close the datepicker. User has to click the calendar icon again, what is a little bit confusing.

<img src="calendar.jpg" (click)="toggleShowCalendar()"/>    
<div *ngIf="calendarVisible" class="calendar">Here is my own calendar</div>

  toggleShowCalendar() {
      this.calendarVisible= !this.calendarVisible;
  }

How to allow to click anywhere outside the div, to close datepicker?