title: How can i hide and show drop down list on input click in angular7?
body: <p>I have an <code>angular7</code> app in which i have a <code>dropdown</code> in which when i select any item from dropdown so <code>dropdown</code> closed. But i also close and open dropdown on <code>input</code> click like toggle. Like if i click on input then <code>dropdown</code> should open and when i again click on <code>input</code> so <code>dropdown</code> should close. Here i create a <a href="https://stackblitz.com/edit/angular-me74sn" rel="nofollow noreferrer">stackblitz</a>  you can see here live example of what i have</p>
  
  <p>I have my <code>component.html</code> like this</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>records = [];
    selectedName : string = '';
    nameDisplayModel = '';
    users = [
      {name : 'Fahad', value :'fahad'},
      {name : 'Saad', value :'saad'},
      {name : 'Anus', value :'anus'},
      {name : 'Hazik', value :'hazik'},
      {name : 'Ahsan', value :'ahsan'},
      {name : 'Sohaib', value :'sohaib'}
    ]
  
    
    credentialsSearchFilter(event: any) {
      const val = event.target.value.toLowerCase();
      this.records = this.users.filter(function(d) {
        return d.name.toLowerCase().indexOf(val) !== -1 || !val;
      });
    }
    hideList(){
      this.records = [];
    }
    getNameValue(row){
        console.log('hello')
        this.nameDisplayModel = row.name;
        this.users.forEach(item=&gt;{
          if(item.name === row.name){
            this.selectedName = row.value;
          }
        })
        this.records = [];
        console.log(this.selectedName)
    }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>p {
    font-family: Lato;
  }
  
  .custom-list{
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
  }
  .autocomplete {
    position: relative;
  }
  .suggestion-list{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    list-style-type: none;
    padding: 0;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
    background-color:white;
  }
  
  li {
    padding: 0.5em;
    line-height: 30px;
  }
  .wrapper{
    padding: 20px;
  }
  li:hover{
    background-color:#a560f3;
    cursor : pointer;
    color:white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
   &lt;div class="row mt-3"&gt;
    &lt;div class="col-6"&gt;
        
     &lt;div class="autocomplete"&gt;
      &lt;input type="text" class="form-control" placeholder="text here" (keyup)="credentialsSearchFilter($event)" (blur)="hideList()" [(ngModel)]="nameDisplayModel"&gt;
      &lt;ul *ngIf="records.length &gt; 0" class="suggestion-list mt-2"&gt;
       &lt;li *ngFor="let record of records" (mousedown)="getNameValue(record)"&gt;{{record.name}}&lt;/li&gt;
      &lt;/ul&gt;
     &lt;/div&gt;
  
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>