How can I close a dropdown on click outside?

You can use (document:click) event:

@Component({
  host: {
    '(document:click)': 'onClick($event)',
  },
})
class SomeComponent() {
  constructor(private _eref: ElementRef) { }

  onClick(event) {
   if (!this._eref.nativeElement.contains(event.target)) // or some similar check
     doSomething();
  }
}

Another approach is to create custom event as a directive. Check out these posts by Ben Nadel:

• tracking-click-events-outside-the-current-component
• selectors-and-outputs-can-have-the-same-name
• DirectiveMetadata
• Host Binding