Как отловить потерю фокуса с компонента и изменить значение при выборе не только в компоненте, а и в привязке?

Question

[Роман Ракзин]

Есть компонент улучшенный dropbox и он выводит данные и потом я хочу передать выбранное значение вверх и при потере фокуса скрыть выпадающий список. Вот код

import { Component, Input, HostListener } from '@angular/core';

@Component({
  selector: 'app-dropbox-comp',
  templateUrl: './dropbox.component.html',
  styleUrls: ['./dropbox.component.scss']
})
export class DropboxComponent{
  @Input() selected: object;
  @Input() array: [];

  public isOpen = false;

  constructor() { }

  toggle(){
    this.isOpen = !this.isOpen;
  }

  change_value(item){
    this.selected = item;
  }

  @HostListener("blur") //Не работает
  lostfocus(){
    this.isOpen = false;
  }

}

Разметка

<div class="dropdown selectDropdown" [ngClass]="{'open': isOpen}" (click)="toggle()" (blur)="lostfocus()">
  <ul (blur)="lostfocus()">
    <li *ngFor="let item of array; let i = index" (click)="change_value(item)"><a>{{item.name}}</a></li>
  </ul>
  <span>{{selected['name']}}</span>
</div>

подключение

<app-dropbox-comp [array]="store['sortCarsParameters']['data']"  
 [selected]="store['sortCarsParameters']['selected']"></app-dropbox-comp>

Вопрос:
1) Если я уйду с компонента - я не могу его "закрыть"
2) Выбранное значение остаётся выбрано внутри компонента, но не выходит наверх по типу двойного связывания и [selected]="store['sortCarsParameters']['selected']" остаётся тем же. Как изменить это значение?