title: How to make a dropdown using input tag in angular 6
body: <p><a href="https://i.stack.imgur.com/ZWCUm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZWCUm.png" alt="Have something like this but the issue is when I click on any options it is not getting selected and the name is not getting changed to the option name."></a>
  Currently I am using a drop down button which is kind of odd. But I kind of ran out of options and hoping that you guys can help me out of this.
  I have already tried the traditional way of using the "select" tag but the issue I am facing is that I need to customise the dropdown body which I am not able to do. 
  The .html snippet is like this,</p>
  
  <pre><code>              &lt;div class="month-selector btn-group"&gt;
                  &lt;button type="button" data-toggle="dropdown"&gt;
                    Dropdown button
                  &lt;/button&gt;
                  &lt;ul class="dropdown-menu scrollable-menu" role="menu"&gt;
                    &lt;li&gt;
                      &lt;div class="item"&gt;Select Category&lt;/div&gt;
                    &lt;/li&gt;
                    &lt;hr class="style-hr"&gt;
                    &lt;li&gt;
                      &lt;div class="item"&gt;General Inquiries&lt;/div&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  </code></pre>
  
  <p>The .ts file is like this.</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  @Component({
    selector: 'app-case-accordian',
    templateUrl: './case-accordian.component.html',
    styleUrls: ['./case-accordian.component.scss']
  })
  export class CaseAccordianComponent implements OnInit {
  constructor(){}
    ngOnInit() {}
  }
  </code></pre>
  
  <p>What changes do I need to fo in .ts file so as to make the selected value reflect back in place of "Dropdown button". Any help is appreciated since I am new to Angular 6. Thanks in advance.</p>