title: Show column when ever the user input text in the search bar
body: <p>I'm doing Angular project and wondering how I can display the middle column when ever the user input any text in the search bar. </p>
  
  <p>So right now, I have search bar for user input and three flex columns. The middle column are hidden when the page is open but I want it to show when ever the user put any text in the search box. Any help will be really appreacited.</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-css lang-css prettyprint-override"><code>.left {
    flex: 2;
  
  }
  
  .right {
    flex: 1;
  
  }
  .center{
    flex: 1;
    display: none;
  }
  
  .parent {
    display: flex;
    overflow: hidden;
    width: 95vw;
    margin-left: 30px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Middle Column --!&gt;
      &lt;div class="center"&gt;
          &lt;div class="chart-header"&gt;Charts&lt;/div&gt;  
          &lt;div&gt;Chart will display here&lt;/div&gt;
      &lt;/div&gt;
      
   
   &lt;!-- My user input/ search bar --!&gt;
   
   &lt;input  [formControl]="inputCtrl" matInput class="input"&gt;
   </code></pre>
  </div>
  </div>
  </p>