Clickable Component For Angular 4+


Clickable Component For Angular 4+

Clickable Component Angular 4+ Directive adding pointer cursor for elements using (click) directive, prevents event when disabled.

User Input

User actions such as clicking a link, pushing a button, and entering text raise DOM events. This page explains how to bind those events to component event handlers using the Angular event binding syntax.

Binding to user input events

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.

The following example shows an event binding that implements a click handler:

src/app/click-me.component.ts
<button (click)="onClickMe()">Click me!</button>

Get user input from the $event object

DOM events carry a payload of information that may be useful to the component. This section shows how to bind to the keyup event of an input box to get the user’s input after each keystroke.

The following code listens to the keyup event and passes the entire event payload ($event) to the component event handler.

src/app/keyup.components.ts (template v.1)
template: `
  <input (keyup)="onKey($event)">
  <p>{{values}}</p>
`

When a user presses and releases a key, the keyup event occurs, and Angular provides a corresponding DOM event object in the $event variable which this code passes as a parameter to the component’s onKey() method.

src/app/keyup.components.ts (class v.1)
export class KeyUpComponent_v1 {
  values = '';

  onKey(event: any) { // without type info
    this.values += event.target.value + ' | ';
  }
}

The properties of an $event object vary depending on the type of DOM event. For example, a mouse event includes different information than an input box editing event.

All standard DOM event objects have a target property, a reference to the element that raised the event. In this case, target refers to the <input> element and event.target.value returns the current contents of that element.

After each call, the onKey() method appends the contents of the input box value to the list in the component’s valuesproperty, followed by a separator character (|). The interpolation displays the accumulating input box changes from the values property.

Suppose the user enters the letters “abc”, and then backspaces to remove them one by one. Here’s what the UI displays: 

key up 1

Alternatively, you could accumulate the individual keys themselves by substituting event.key for event.target.value in which case the same user input would produce:

For More Angular Jquery And plugins click


 

Leave a Reply

Your email address will not be published. Required fields are marked *