Detect click on an icon within an angular input

Question

I have a css styled post that contains a calendar icon at the end of the post. Currently when clicking on any part of the input, it raises a modal with a calendar.

What I have to do now is that the popup is raised only when the calendar icon is clicked, that is, I must detect the click in a certain part within the input. Is it possible to do that?

My html code:

My css:

 .icon-calendar {
    background-image: url("/assets/calendar.png");
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: calc(100% - 12px);
    background-size: 20px;
}

currently the click detects it at the input level, but I need to make it detect it by clicking only the icon

user_4218046 · Answer

By setting the icon as a background-image thats not possible as the icon is part of the input itself. So whenever you click the icon you actually click the input.

Youll need to move the icon to another element and position it above the input. I added a example below (the Icon would be styled onto .form-button).

* {
  box-sizing: border-box;
}

.form-group {
  position: relative;
  width: 200px;
}

.form-group .form-control {
  position: relative;
  z-index: 1;
  width: 100%;
}

.form-group .form-button {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

Detect click on an icon within an angular input

1 Answers