CODEWITHSUNDEEP
angular
xRay
xRay

Reputation: 801

Using (click)="" on dynamic hyperlinks

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.

Upvotes: 0

Views: 36

Answers (1)

user2304483
user2304483

Reputation: 1644

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.

Upvotes: 1

Related Questions