Using (click)="" on dynamic hyperlinks

Question

I have an empty array and this is how I push an item into it, which includes an <a> tag:

this.errors.push('At least 1 <a (click)="jumpToError($event)" href="">service</a> should be added.');

<ul *ngFor="let error of errors">
  <li [innerHTML]="error"></li>
</ul>

When the user clicks on that link, I want to invoke the following function:

jumpToError(event: MouseEvent): void {
  event.preventDefault();
  console.log('Clicking works!')
}

My problem is, when I click on that link, the same page will be reloaded and I can't see whether the function has been invoked or not.

Yeah this won’t work. Angular will not process that at all. — MikeOne
– MikeOne, Commented Oct 9, 2022 at 19:02

user2304483 · Accepted Answer · 2022-10-10 14:47:34Z

1

As mentioned in the comment angular will not process the link cause the event will not register,

The best way to do this is to put all the errors in the page, you can create a map which will include visibility of each error:

<div *ngIf="errorsMap.get('myError').isError">
      <a (click)="jumpToError($event)" href="">service</a>
</div>

But to be honest, I'm not sure what is your use case, why you need this.

answered Oct 10, 2022 at 14:47

user2304483

1,6547 gold badges33 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1