title: Angular 5 click bind to anchor tag
body: <p>I need to bind a click event on an anchor in my template:</p>
  
  <p>My html looks like this:</p>
  
  <pre><code>&lt;a (click)="deleteUser(user)"&gt;
      &lt;i class="la la-trash"&gt;&lt;/i&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p><code>user</code> is a variable from a previous <code>*ngFor="let user of users"</code></p>
  
  <p>The <code>deleteUser()</code> function is declared on my <code>users.component.ts</code> file:</p>
  
  <pre><code>import { Component, OnInit, ViewEncapsulation, AfterViewInit } from '@angular/core';
  import { Helpers } from '../../../../helpers';
  import { ScriptLoaderService } from '../../../../_services/script-loader.service';
  
  import { User } from '../../../../models/user';
  import { UsersService } from '../../../../_services/users.service';
  
  import swal from 'sweetalert';
  
  
  @Component({
      selector: ".m-grid__item.m-grid__item--fluid.m-wrapper",
      templateUrl: "./users.component.html",
      styleUrls: ["./users.component.scss"],
      encapsulation: ViewEncapsulation.None,
  })
  export class UsersComponent implements OnInit, AfterViewInit {
  
      users: User[];
  
      constructor(
          private _script: ScriptLoaderService,
          private usersService: UsersService
      ) { }
  
      ngOnInit() {
          this.getUsers();
      }
  
      getUsers(): void {
          this.usersService.getUsers()
              .subscribe(users =&gt; this.users = users)
      }
  
      ngAfterViewInit() {
          this._script.load('.m-grid__item.m-grid__item--fluid.m-wrapper',
              'assets/app/js/users.js');
      }
  
      deleteUser(user: User): void {
          swal({
              title: `Eliminar usuario ${user.name}`,
              text: "Una vez eliminado, toda su información será eliminada!",
              icon: "warning",
              dangerMode: true,
            })
            .then((willDelete) =&gt; {
              if (willDelete) {
                  this.usersService.deleteUser(user.id)
                      .subscribe(() =&gt; {
                          swal("Usuario eliminado", {
                              icon: "success",
                          });
                      });
              }
            });
      }
  
  }
  </code></pre>
  
  <p>However that click event is never triggered. It simply doesn't do anything. No errors, nothing. 
  I've tried a lot of variations to try to make it work:</p>
  
  <ul>
  <li>routerLink=""</li>
  <li>[routerLink]=""</li>
  <li>href=""</li>
  <li>href="#"</li>
  <li>href="#!"</li>
  <li>href="!#"</li>
  <li>Change <code>&lt;a&gt;</code> tag for <code>&lt;div&gt;</code>, <code>&lt;span&gt;</code>, <code>&lt;div&gt;</code>, <code>&lt;button&gt;</code> but none worked </li>
  </ul>
  
  <p>I've tried this <a href="https://stackoverflow.com/questions/41458842/attaching-click-to-anchor-tag-in-angular2">another question</a> but I think it didn't work because it is Angular2 (I'm using Angular 5).</p>
  
  <p>The template I'm using is <a href="http://keenthemes.com/metronic/documentation.html" rel="noreferrer">Metronic</a> (just in case is relevant)</p>