title: Toggle underline for mat-form-field matInput on and off on click
body: <p>Is it possible to toggle the underline for a matInput of a mat-form-field on and off using either CSS or backend Typescript?</p>
  
  <p>I have seen something such as <strong><a href="https://stackoverflow.com/questions/45556972/how-to-hide-delete-underline-input-angular-material">this question</a></strong> which shows it can be <strong><em>removed</em></strong> with css such as:</p>
  
  <pre><code>::ng-deep .mat-form-field-underline {
      display: none;
  }
  </code></pre>
  
  <p>But I am unsure whether this can be implemented within an <strong><code>[ngClass]</code></strong>
   to toggle it?</p>
  
  <p>The question also shows that it can be done programatically, however I am unaware of if this is reversible, and also I am using material design with the prefix <code>mat</code> rather than <code>md</code>...</p>
  
  <pre><code>@ViewChild('input') input: MdInputDirective;
  
  ngOnInit(){
    this.input.underlineRef.nativeElement.className = null;
  }
  </code></pre>
  
  <p>Here is my <a href="https://stackblitz.com/edit/input-underline-toggle" rel="nofollow noreferrer">blitz</a></p>