Angular 2 event when input selected

Question

im wondering if it's in angular any event which occurs when input is selected, (select) doesn't work when I click on input by mouse(only tab)

Html:

<div (seeked)="setFocus($event.target.name)">
// I tried (focus) (select) (input) (click)<-this one is closest
<input type="text" name="input1">
<input type="text" name="input2">
</div

I work on angular 2.4.1 [edited]

Please add the code you have tried. – Nehal Aug 03 '17 at 13:54 — Nehal, Aug 03 '17 at 13:54

score 7 · Answer 1 · answered Aug 03 '17 at 13:59

7

You can use focus event of the event:

<input type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()"/>

Check out this link: HTML5 event handling(onfocus and onfocusout) using angular 2

answered Aug 03 '17 at 13:59

Nour

5,609
3
21
24

Thanks, I wanted to avoid using event on every inputs, but I see that I'll have too – Jędrek Markowski Aug 03 '17 at 14:03
1

If you have shared functionality you wanna add it to every input when it is focused you can create a directive and use it on every input. – Nour Aug 03 '17 at 14:13
Ye, but then I couldn't output it into other component, only to component, where it hppened – Jędrek Markowski Aug 03 '17 at 14:16
When you create directive you can import it and use it into any component. check the documentation link: https://angular.io/api/core/Directive – Nour Aug 03 '17 at 14:19

score 1 · Answer 2 · answered Aug 03 '17 at 13:57

You should use change event

onChangeDepartment() {
    console.log("select event");
  }

 <md-select name="department" [(ngModel)]="reportFilter.department" #departmentTemp="ngModel" (change)="onChangeDepartment()"
          required>
          <md-option *ngFor="let department of departments" [value]="department">{{department.name}}</md-option>
        </md-select>

score 0 · Answer 3 · answered Aug 03 '17 at 13:58

0

For input of text type: (focus)="functionToCall()"

answered Aug 03 '17 at 13:58

elzoy

5,237
11
40
65

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

You can use Angular event bindings to respond to any DOM event. Many DOM events are triggered by user input. Binding to these events provides a way to get input from the user.

To bind to a DOM event, surround the DOM event name in parentheses and assign a quoted template statement to it.

  <input type="text" (focus)="myOnFocus($event)">

source

if you want to avoid binding the event to each input it would be easier/more clean to create a directive and attach it to all inputs, check this answer.

Angular 2 event when input selected

4 Answers4