Unable to call click method on anchor tag in a pre tag the click event isn't captured and the method doesn't fire

HTML:-

<pre #toolTip hidden>  {{ cellId }} has been removed<a (click)="test()">UNDO</a></pre>
        <button color="primary" copy   [target]="toolTip" (click)="remove(cellId)">{{ 'yes'}}</button>

JAVASCRIPT:-

test() {
   console.log("hey");
}

Copy is a directive that uses advgrowlservice to create a success message, I am passing the pre html to the growlservice, the success message works but the anchor tag isn't firing the test method.

Things tried so far:

1.<a href='javascript:;' onclick='test();'>More ></a>

2.<a href="javascript:test();">More >>></a>

3.<a href='' onclick='return test()'>check</a>

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

4.<a [routerLink]="" (click)="test()">Go to page 2</a>

5.Remove the href tag from to prevent a page forwarding. Then just add your usual Angular click attribute and function. Add to style: "cursor: pointer" to make it act like a button

There is a requirement more: When any action happens on an angular page, to fire a service.

I would appreciate if a working sample is shared.