Tengo un contenedor div con campo de entrada y div oculto dentro. Y cuando la entrada está enfocada, necesito abrir el segundo div con el menú desplegable. ¿Cómo ocultar ese segundo div solo cuando se hace clic fuera del contenedor principal?
<div class="container" > <div class="_search-type"> <button [nzDropdownMenu]="menu" > <div class="t-text-xs"> <i *ngIf="!searchTypeItem" class="fa fa-user t-mr-2"></i> <i *ngIf="searchTypeItem?.label === SearchValue.LEAD" class="fa fa-user t-mr-2"></i> <i *ngIf="searchTypeItem?.label === SearchValue.EMAIL" class="fa fa-envelope t-mr-2"></i> <i *ngIf="searchTypeItem?.label === SearchValue.COMPANY" class="fa fa-building t-mr-2"></i> {{ !searchTypeItem ? 'Lead' : searchTypeItem?.label }} </div> </button> <nz-dropdown-menu #menu="nzDropdownMenu"> <ul> <li> <i>1</i> <i>2</i> <i>3</i> </li> </ul> </nz-dropdown-menu> </div> <input id="searchInput" placeholder="Search" type="search" /> <button class="t-hidden" type="submit" name="submit"></button> </div>
