CODEWITHSUNDEEP
angularangular-fontawesome
coder101
coder101

Reputation: 455

How to prevent clicking on a angular-fontawesome icon from redirecting to a default page

I'm using font awesome icons (minus and plus) in an angular app. The plus icon changes to minus when my list expands and the minus turns to plus when the list collapses. For some reason, clicking on the icon results in redirection to my home page. How can I prevent that from happening? What I'm looking for is when the plus icon is clicked, it expands my list, but keeps me on the same page and when the minus icon is clicked, it collapses my list, but keeps me on the same page (i.e., no redirection). Here's my code:

<div>
  <a (click)="toggle(filters[0])" data-toggle="collapse" href="#coverageFilters" role="button" aria-expanded="true" aria-controls="coverageFilters"><fa-icon icon="{{filters[0]['collapse'] ? 'plus' : 'minus'}}"></fa-icon> {{filters[0].name}}</a>
  <div class="collapse show multi-collapse" id="coverageFilters">
    <ul class="filter" *ngFor="let item of filters[0].value"><input type="checkbox"> {{item}}</ul>
  </div>
</div>

Here's the code for the toggle function:

toggle(item){
  if (item['collapse'] == false){
    item['collapse'] = true;
  } else {
    item['collapse'] = false;
  }
}

Do I have to change any default settings for the icons? If yes, where can I find them and which settings should I change?

Upvotes: 1

Views: 552

Answers (2)

Mensur Grišević
Mensur Grišević

Reputation: 593

try something like this:

(click)="preventRedirectOnClick($event, filters[0])"

in the.ts : 

preventRedirectOnClick($event, item) {
  $event.stopPropagation();
  $event.preventDefault();

  this.toggle(item);
}

Upvotes: 0

Ramesh Reddy
Ramesh Reddy

Reputation: 10652

Since your a tag has href attribute like href="#coverageFilters".

Upon clicking it the #coverageFilters will be appended to the URL path and now if you are using routing then angular searches for the route matching the new path (Example: localhost:3000/something#coverageFilters) but most probably you don't have a path like that and you also might have a default path(home page in your case) to be redirected to. So because of the unmatched path, you are being redirected to your homepage.

Upvotes: 2

Related Questions