title: How to put x button to clear content in input field using angular 5 and bootstrap
body: <p>I am trying to put a 'x' button inside an input field using angular 5 and bootstrap but was not successful.</p>
  
  <p>By clicking on 'x' button the content in that input field should get cleared</p>
  
  <p>I tried using </p>
  
  <pre><code>&lt;input type="search" id = "search"&gt;
  </code></pre>
  
  <p>In CSS: </p>
  
  <pre><code> input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
  }
  input[type="search"]::-ms-clear {
    color: red;
  }
  </code></pre>
  
  <p>However, I have a problem with this implementation as the webkit-apperance has the compatibility issue with IE11 (even firefox dont support it) and the 'x' is not showing.</p>
  
  <p>can any one help me to find if there is any solution with Angular 5/6/7 and Bootstrap 4.</p>
  
  <p>I have a solution to work with Jquery and Javascript
  <a href="https://codepen.io/frosdqy/pen/grbxGW" rel="nofollow noreferrer">https://codepen.io/frosdqy/pen/grbxGW</a> </p>
  
  <p>but looking for pure typescript(Angular) or bootstrap solution.</p>
  
  <p>If someone can help with angular5 it would be a great help!</p>