-1

I have a few <i> elements with glyphicons and I want them to be triggered when I press the ENTER key. I am using Angular 2 How can I do this?

<i class="glyphicon  glyphicon-menu-down down"
                   *ngIf="!(sort.name === 'Last Name' && sort.order > 0)" (click)="sortTrips('name')" ></i> .
Nelul
  • 115
  • 1
  • 8
  • Try attaching `click` event. – Hassan Imam Oct 16 '17 at 08:15
  • – Roy Bogado Oct 16 '17 at 08:18
  • Sorry my question is incomplete. I want the click event to be accessible with keyboard when hitting the ENTER key. I've already read couple of articles but the only solution i found was to listen to keypress. – Nelul Oct 16 '17 at 08:21
  • Possible duplicate of [How to simulate a click with JavaScript?](https://stackoverflow.com/questions/2705583/how-to-simulate-a-click-with-javascript) – Vucko Oct 16 '17 at 08:23
  • When one say "click", it usually means click with a mouse and / or touchscreen. But apparently you want the element to be selectable with tab and react to keyboard event, right ? – Pac0 Oct 16 '17 at 13:11
  • Yes I want the element to be triggered when I press ENTER on keyboard – Nelul Oct 17 '17 at 07:06
  • Your question title _is the opposite_ of what you want. You _do want to listen_ to keypress. How else do you intend for this to respond to the `ENTER` key? – random_user_name Oct 19 '17 at 13:11
  • I wanted to find a UI solution for this. – Nelul Oct 19 '17 at 13:15

2 Answers2

1

I've found the answer (only for Angular 2): 

<div (keyup.enter)="function()">
 <i class="glyphicon  glyphicon-menu-down down"><i>
</div>

In this situation the application is working as inttended.

Alex
  • 311
  • 2
  • 17
Nelul
  • 115
  • 1
  • 8
0

Try to create an event like @HassanIman say it looks like :

<!DOCTYPE html>
<html>
<body>

<p>This example demonstrates how to assign an "onclick" event to a p element.</p>

<p id="demo" onclick="myFunction()">Click me.</p>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>

</body>
</html>

You try see the full exemple in this website : W3SCHOOLS ONCLICK EVENT

F0XS
  • 1,271
  • 3
  • 15
  • 19
  • https://alligator.io/angular/binding-keyup-keydown-events/ . Here you can find additional details – Nelul Oct 18 '17 at 10:43