Angular2 - reference element state

Question

I have this Component

@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: [
        TooltipComponent
    ]
})

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 1

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