CODEWITHSUNDEEP
angular
pmh
pmh

Reputation: 312

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

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>

Upvotes: 4

Views: 1383

Answers (3)

Giorgi
Giorgi

Reputation: 91

You can check if input is touched.

<div class="form-group col-md-9">
 <input id="notes" placeholder="Notes" formControlName="notes" />
  <div *ngIf="!(notes.dirty || notes.touched)" id="another-div">Test div which is hidden when notes input is in focus
 </div>
</div>

Upvotes: 1

Jai
Jai

Reputation: 74738

Well you can do this with css1 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.

Upvotes: 4

Adrita Sharma
Adrita Sharma

Reputation: 22203

Try like this:

<div class="form-group col-md-9">
    <input id="notes" placeholder="Notes" formControlName="notes" (focus)="isDivHidden = true" (blur)="isDivHidden = false"/>
    <div id="another-div" *ngIf="!isDivHidden">Test div which is hidden when notes input is in focus
    </div>
</div>

Working Demo

Upvotes: 2

Related Questions