ngClick not working

[ingrocha]

:beetle: bug report

When i try to use the event (click) inside <td> it dosen't work, [routerLink] works fine

:microscope: Minimal Reproduction

HTML:

<table
  datatable
  [dtOptions]="dtOptions"
  [dtTrigger]="dtTrigger"
  class="table table-hover table-mail"
>
  <thead style="display: none"></thead>
  <tbody>
    <tr
      *ngFor="let data of data"
      [ngClass]="{
        unread: data.estatus === 'PENDIENTE' && bandeja === 'inbox',
        read:
          data.estatus === 'LEIDO' || bandeja === 'send' || bandeja === 'trash'
      }"
    >
      <td class="check-mail">
        <input type="checkbox" class="i-checks" />
      </td>
      <td class="mail-contact" *ngIf="bandeja !== 'send'">
        <a [routerLink]="['/mailbox/detail', bandeja, data.mensajes_id]">{{
          data.mensaje.usuario.nombre
        }}</a>
      </td>
      <td class="mail-contact" *ngIf="bandeja === 'send'">
        <a (click)="leidos(data.mensajes_id)">
          {{ data.estatusfinal }}
        </a>
      </td>
      <td class="mail-subject">
        <a [routerLink]="['/mailbox/detail', bandeja, data.mensajes_id]">{{
          data.mensaje.titulo | stringLimit
        }}</a>
      </td>
      <td class="">
        <i
          class="fa fa-paperclip"
          *ngIf="data.mensaje.mensajes_archivos.length > 0"
        ></i>
      </td>
      <td class="mail-date">
        {{ data.mensaje.createdAt | pasoTiempo }}
      </td>
    </tr>
  </tbody>
</table>

TS:

import { Component, OnInit } from '@angular/core';
import { Subject } from 'rxjs';

@Component({
  selector: 'data-table',
  templateUrl: './data-table.component.html',
  styles: [],
  inputs: [
    'columns',
    'routerLinkData',
    'order',
    'orderDir',
    'iconSize',
    'data',
    'dtTrigger',
    'bandeja',
  ],
})
export class DataTableComponent implements OnInit {
  constructor() {}

  columns: any;
  order: any;
  data: any;
  orderDir: any;
  iconSize: any;
  bandeja: any;
  objetoLeidos: Object;
  dtTrigger: Subject<any> = new Subject();

  dtOptions: DataTables.Settings = {};

  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
      language: {
        search: 'Buscar:',
        zeroRecords: 'No se encontro informacion',
        processing: 'Procesando...',
        loadingRecords: 'Cargando...',
        lengthMenu: 'Mostrando _MENU_ registros',
        info: 'Mostrando _START_ a _END_  de _TOTAL_ registros',
        infoFiltered: '(Filtrado de _MAX_ Registros)',
        infoEmpty: 'Mostrando 0 a 0 de 0 registros',
        paginate: {
          first: 'Inicio',
          last: 'Final',
          next: 'Siguiente',
          previous: 'Anterior',
        },
      },
      columns: this.columns,
    };
  }

  leidos(id: any) {
    var d = new Date();
    console.log(id);
    const clicks = [id, d.getTime()];
    console.log(clicks);
    // this.objetoLeidos = clicks;
  }
}

:globe_with_meridians: Your Environment

• node version: 12.18.2
• angular version: 12.1.2
• angular-cli version: 12.1.2
• jquery version: 3.6.0
• datatables version: 1.10.25
• angular-datatables version: 12.0.0

:memo: Additional context

If i put the click event on the td it works fine but inside not

[shanmukhateja]

Hi,

Could you provide a StackBlitz link instead? Your minimal repro code doesn't work out-of-the-box on a new Angular project to investigate.

[ingrocha]

Hi,

Could you provide a StackBlitz link instead? Your minimal repro code doesn't work out-of-the-box on a new Angular project to investigate.

Hi, thank you for your quick reply.

Im trying but it gets error here is the link https://stackblitz.com/edit/angular-ivy-zpdyzi?file=src/app/app.component.html

This is the error:

I follow all the steps and it gets this error

[shanmukhateja]

Hi,

It's complaining about fact that jQuery is missing on the repo.

Please check if jQuery is added as dependency and is included in angular.json

[ingrocha]

Hi,

It's complaining about fact that jQuery is missing on the repo.

Please check if jQuery is added as dependency and is included in angular.json

Hi, thanks yes i undenstand thats the problem but what i really concern its that its all declare correctly as you can see in the stackblitz that i posted previously

[shanmukhateja]

@ingrocha I don't know why it's not working. Your config looks alright, maybe its StackBlitz issue?

Anyway, I can't look into this unless this is resolved :(

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been closed due to inactivity. Please feel free to re-open the issue to add new inputs.

[JaiShukla15]

I am also facing this issue in angular 7 (click) event is not working in case of small devices