title: Drop-down List is not getting closed on clicking other drop-down input field in Angular-6
body: <p>I have created a component of custom drop down list, for re-use it in another components like form.</p>
  
  <p>I am using two components</p>
  
  <p>1) Form (Parent Component)
     2) drop-down (Child Component)</p>
  
  <p>Form component has two drop-down  list first is Country Name list and second is Cities Name list. The data is sending from parent component to make the drop down-list.
  The expected behaviour is as follows.</p>
  
  <p>1) On clicking the Country input field, the list of Country Names drop-down should be open
    2) On clicking the Country input field again, the drop-down should be hide
    3) On clicking any where in page the drop-down should hide.
    4) On clicking another drop-down input field the relevant drop-down list should be open and same time other drop-down should be hide.</p>
  
  <p>Every-thing is working fine except following.</p>
  
  <p>If Country down-list is already opened and same time I click on Cities drop-down input field the relevant Cities drop-down get opened. 
    But the Country drop-down list is not getting hiding. The expectation is Country drop-down list should hide.</p>