Angular Onclick() not working on second button

Question

As you can see in the code, there are two onClick() methods. Both appear on the UI. But when I click on the second onClick() method, it doesn't call the method but the first one calls. I am not able to understand why this is happening. Please help.

        <div class="col-sm-12 text-right mrg-top-15">
            <div class="action-btns text-right flex">
                <span class="icon-pending"></span>
                <vh-button [type]="'trash'" (onClick)="navigateToHRA()" class="mrg-lft-10" id="icd-delete"></vh-button>
            </div>
            <button (onClick)="navigateToHRA()" class="btn btn-primary">{{'LookUpButtonText'|translate}}</button>
        </div>

Answer 1

You need to use (click) when using Angular's click event.

<button (click)="navigateToHRA()" class="btn btn-primary">{{'LookUpButtonText'|translate}}</button>

The other (onClick) event is most probably the output event emitter of vh-button component/directive.