'How to change image icons when navbar tab active and Inactive in angular

when navbar link is active, It displays image src="/images/email-images/mail_outline_black.svg"

And I need to change image icon when navbarlink is inactive , It should display src="/images/email-images/mail_outline_white.svg"

In here, I have used boostrap navlink.

<a class="btn SearchBtn-via-email-tab" ngbNavLink>
<img class="email-image-itinerary" src="/images/email-images/mail_outline_black.svg" />Via Email</a>
angularnavbar


Solution 1:[1]

A nbgNavlink, when is active is added the class "active" -so the links becomes some like-

<a class="nav-link active"...>

You can think about create a .css that take account this idea, but you can also use the property activeId of the ngbNav and use some like

<!--see the "template reference variable "nav"-->
<ul ngbNav #nav="ngbNav">
   <!--see that you indicate, for this nav that the ngbNavItem is "1"-->
  <li [ngbNavItem]="1">
    <a class="btn SearchBtn-via-email-tab" ngbNavLink>
    <!--if the activeId is "1" one image else anotherone--> 
    <img class="email-image-itinerary" 
         [src]="nav.activeId==1?'/images/email-images/mail_outline_black.svg"':
                  '/images/email-images/mail_outline_white.svg"' />

  </li>
  ...
</ul>

NOTE: You should put your images in the "assets" folder and use some like

   [src]="condition?'assets/images/....:'assets/images/...'>

-see that "assets" is not preceding by /

Solution 2:[2]

Another way to solve this is with <ng-template> . I would write something like that:

<ng-template [ngIf]="nav.activeId" [ngIfElse]="noMail">
    <img src="/images/email-images/mail_outline_black.svg">
</ng-template>
    
<ng-template #noMail>
    <img src="/images/email-images/mail_outline_white.svg">
</ng-template>

Read more about it here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Eliseo
Solution 2 PhilipAllStar

Related Questions