1

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?

plr108
  • 1,201
  • 11
  • 16
coder101
  • 383
  • 4
  • 21
  • it's not because of the fontawesome icons...it's the href attribute – Ramesh Reddy Feb 06 '20 at 13:32
  • @Ramesh, why is it that the href attribute give the exact outcome when I click on the output of {{filters[0].name}} without redirecting me to a different page, but I get redirected to a different page when I click on the icon itself? – coder101 Feb 06 '20 at 13:35
  • 1
    @coder101 I believe this is same as [this issue](https://github.com/FortAwesome/angular-fontawesome/issues/200). Please check [my comment](https://github.com/FortAwesome/angular-fontawesome/issues/200#issuecomment-552221660) for in-depth explanation and potential solutions. UPD Sorry, almost the same. But the reasoning and solutions are very similar. In your case Bootstrap's click handler, which prevents default link behavior (navigate to a link) is not executed. – Yaroslav Admin Feb 06 '20 at 13:38
  • @YaroslavAdmin: This is precisely what I needed. I opted to use the setTimeout option instead of using ng-bootstrap, and it worked like a charm. Thanks. – coder101 Feb 06 '20 at 14:55

2 Answers2

2

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.

Ramesh Reddy
  • 10,159
  • 3
  • 17
  • 32
  • Inclusion of the a href attribute works fine when I click on the output of {{filters[0].name}}. But it ends up redirecting me to the home page (default path) when I click on the icon. Why the difference in behavior and how to prevent this redirection behavior? – coder101 Feb 06 '20 at 13:41
  • Indeed. Just get rid of the a (you are not linking to a url anyway) and put the click trigger on the icon: – johey Feb 06 '20 at 13:42
  • @coder101 try using `$event.stopPropagation();` and/or `$event.preventDefault();` as described in mensur's answer. – Ramesh Reddy Feb 06 '20 at 13:51
  • Thanks for all the feedback. An easier solution is posted in a link shared by @YarsolavAdmin - using a setTimeout option. It's a single line of code that did the trick to resolve the problem. – coder101 Feb 06 '20 at 14:57
0

try something like this:

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

in the.ts : 

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

  this.toggle(item);
}
Mensur Grišević
  • 563
  • 7
  • 15