I want to hide a div when one input is in focus in Angular 4 or Angular 6

Question

I want to hide a div when an input is in focus.

I tried to hide another div by ng-class however I really don't know how to implement it.

<div class="form-group col-md-9">
 <input id="notes" placeholder="Notes" formControlName="notes" />
  <div id="another-div">Test div which is hidden when notes input is in focus
 </div>
</div>

Answer 1

Well you can do this with css¹ only:

input:focus+div{ display:none; }

<div class="form-group col-md-9">
  <input id="notes" placeholder="Notes" formControlName="notes" />
  <div id="another-div">Test div which is hidden when notes input is in focus
  </div>
</div>

^{Note: 1. This requires a div after the input.}