Angular:Onclick on HTML Element According to Its Class

Angular : onClick on html element according to its class

Normally the 3rd party widget should provide a click handler like so:

<myWidGet (click)="myFunction($event)"></myWidGet>

and in the controller:

myFunction(evt) {
  const target = evt.target
  console.log('test')
}

However, if they do not expose click handlers then I would seriously consider not using the widget.

If want to use the widget anyway then do this using jQuery:

ngAfterViewInit() {
  $('.dx-edit-row.dx-command-edit.dx-link-save').on('click', (evt) => {
    const target = evt.target
    console.log('test')
  });
}

The above assumes ALL these classes are present on the same button.

Or just use vanilla JS.

If the buttons are not available on ngAfterViewInit() then you could do this:

ngAfterViewInit() {
  const interval = setInterval(() => {
    const button = $('.dx-edit-row.dx-command-edit.dx-link-save')
    // if button is ready
    if (button) {
      // add click handlers
      button.on('click', (evt) => {
        const target = evt.target
        console.log('test')
      });
      // stop polling
      clearInterval(interval)
    }
  }, 100)
}

Angular ngClass and click event for toggling class

This should work for you.

In .html:

<div class="my_class" (click)="clickEvent()"  
    [ngClass]="status ? 'success' : 'danger'">                
     Some content
</div>

In .ts:

status: boolean = false;
clickEvent(){
    this.status = !this.status;       
}

Adding class to an element on its click event

You can pass $event to click

<p ng-click='selectMe($event)'>{{data.name}}</p>

//code:
$scope.selectMe = function (event){
   $(event.target).addClass('active');
}

angular - Adding a class to a DOM element when clicked

Since Tyler's answer, things have changed a bit. Renderer is depreciated and replaced by Renderer2. In Renderer 2, the class setElementClass is replaced by addClass. And the new function signature for addClass, according to the docs is

addClass(el: any, name: string): void

So the updated menuToggle function should read

menuToggle(event:any) {
    this.renderer.addClass(event.target,"opened");
}

Angular2 get clicked element id

If you want to have access to the id attribute of the button you can leverage the srcElement property of the event:

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  template: `
    <button (click)="onClick($event)" id="test">Click</button>
  `
})
export class AppComponent {
  onClick(event) {
    var target = event.target || event.srcElement || event.currentTarget;
    var idAttr = target.attributes.id;
    var value = idAttr.nodeValue;
  }
}

See this plunkr: https://plnkr.co/edit/QGdou4?p=preview.

See this question:

• How can I make event.srcElement work in Firefox and what does it mean?

Angular on click event for multiple items

you could apply your class through javascript

<div (click)="handleClick($event)">
    some content
</div>

then your handler

handleClick(event) {
    const className = 'collapsible-panel--expanded';
    if (event.target.classList.contains(className)) {
        event.target.classList.remove(className);
    } else {
        event.target.classList.add(className);
    }
}

In plain html and js it could be done like this

function handleClick(event) {    const className = 'collapsible-panel--expanded';    if (event.target.classList.contains(className)) {        event.target.classList.remove(className);    } else {        event.target.classList.add(className);    }    console.log(event.target.classList.value);}

<div onclick="handleClick(event)">some content</div>

<div ng-repeat="cell in [0,1,2]" data-ng-class="{cell:true, active:index=='{{$index}}'}">
    <div class="offset-container pull-left">
        <i data-ng-click="activate($index)">Activate Me</i>
    </div>
</div>

  $scope.activate= function(index){
      $scope.index=index;
  };