how to use angular router link on an image to make it as a link to navigate into other component

Question

how to make clickable image that navigate into other components in angular , this image is placed in navbar as a small profile picture of the current user.

      <img ngSrc="{{User.photoUrl ||'./assets/images/default.png'}}" alt="user image" height="40" 
       width="40" priority>

Answer 1

To use routerlink in an <img>-element, you can wrap it in an <a>-element and apply the router-link to the <a>-element:

<a [routerLink]="['/route']">
   <img ngSrc="{{User.photoUrl ||'./assets/images/default.png'}}" alt="userimage" height="40" width="40" priority>
</a>