Marián Zeke Šedaj Marián Zeke Šedaj - 1 year ago 144
Javascript Question

Angular2 - reference element state

I have this Component

selector: 'registration-form',
template: `
<label for="email" class="name">Email</label>
<input #email id="email" class="input" ngControl="email">
<tooltip [visible]="if-email-input-above-is-focused"></tooltip>
directives: [

export class RegistrationForm {


and I want to show the tooltip component only if the above input field is focused. The thing is, I don't want to write custom funcions for all input fields but only somehow to reference state of field above.

What is the most intelligent way to do this ?

Answer Source

You can use focus and blur events together like:

<input id="email" class="input" ngControl="email" (focus)="visible=1" (blur)="visible=0">
<div *ngIf="visible">Tooltip</div>

Plunker Example

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download