Angular click outside component functionality

click-outside.ts

import { Component, OnInit, ElementRef } from '@angular/core';
import { PostsService } from '../post-service';
import 'rxjs/add/operator/map'
@Component({
  selector: 'app-post-listing',
  templateUrl: './post-listing.component.html',
  styleUrls: ['./post-listing.component.css'],
  host: {
    '(document:click)': 'onClick($event)',
  },
})
export class PostListingComponent implements OnInit {

  postDataListing: any = [];

  constructor(
    private _eref: ElementRef,
    private PostsServiceList: PostsService
  ) {}

  ngOnInit() {
    this.PostsServiceList.getPostData().subscribe(data => this.postDataListing = data);
  }

  onClick(event) {
   if (!this._eref.nativeElement.contains(event.target)) {
     console.log('click outside');
    } else {
      console.log('click inside');
    }
  }
}