title: How do you apply conditional css on a child component's input field in Angular 5?
body: <p>I am running into issues trying to style a child component's autocomplete field's background color dynamically based off a boolean condition. </p>
  
  <p>In my parent component, I have a search component that contains a Angular Material autocomplete field:</p>
  
  <pre><code>&lt;search (notify)="onSearch($event, i)" searchType="Product" 
      [(value)]="repair.product" 
      [ngClass]="{'error-color': repair.invalidProduct}"&gt;&lt;/search&gt;
  </code></pre>
  
  <p>And in my parent component's scss I have this class:</p>
  
  <pre><code>:host ::ng-deep search.input .error-color {
    background-color: rgba(255, 255, 0, 0.48);
  }
  </code></pre>
  
  <p>Is there a way to do this?</p>