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

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  ngbNavLink>
<img  src="/images/email-images/mail_outline_black.svg" />Via Email</a>

CodePudding user response：

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

<a ...>

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  ngbNavLink>
    <!--if the activeId is "1" one image else anotherone--> 
    <img  
         [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 /

CodePudding user response：

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>