-1

the ion-avatar is not working properly when put into an ion-toolbar.

The following code is working so far, but as soon as I am removing the *ngIf=“data” from ion-img the image is not shown anymore. Since the ngIf is not actually required here this behavior is already strange.

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
      <ion-avatar id="toolbar-avatar" style="width: 25px; height: 25px;">
        <ion-img *ngIf="data" src="{{data.avatarImg}}"></ion-img>
      </ion-avatar>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button (click)="myMethod()">
        <ion-icon slot="icon-only" name="search-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Title</ion-title>
  </ion-toolbar>
</ion-header>

What I actually want to achieve is to have two ion-avatar and by a condition its decided which one will be shown. For that I am using this code:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
      <ion-avatar *ngIf="condition" id="toolbar-avatar" style="width: 25px; height: 25px;">
        <ion-img *ngIf="data" src="{{data.avatarImg}}"></ion-img>
      </ion-avatar>
      <ion-avatar *ngIf="!condition" id="toolbar-avatar" style="width: 25px; height: 25px;" [style.background]="data.avatarBackgroundColor">
           {{data.someShortText}}
      </ion-avatar>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button (click)="myMethod()">
        <ion-icon slot="icon-only" name="search-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Title</ion-title>
  </ion-toolbar>
</ion-header>

For this example it doesnt matter if it makes sense to you to have this approach with these two avatars. Anyway, as soon as I add the ngIf to the ion-avatar the thing breaks and none of the avatars is shown plus the entire UI behaves in a strange way. I am using the same approach in some other code parts and its working just fine, this problem just comes up as soon as its used within the ion-header/ion-toolbar. Anyone an info what is going on here or a hint about how to accomplish what I am aiming for?

One last thing: In the Ionic component docs about the ion-avatar the following code snippet is shown:

<ion-avatar>  
      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>

Why is always a usual img used in the docs instead of an ion-img ?

Thanks in advance for everything. Cheers

PietZeHut
  • 125
  • 1
  • 8

1 Answers1

0

Even if avatar could be use in any item, it seems better to wrap them in an item or a chip.

Also the ion-img might not be designed to be used inside the avatar component.

<ion-chip *ngIf="condition">
  <ion-avatar>
    <img src="{{data.avatarImg}}">
  </ion-avatar>
  <ion-label>{{data.someText}}</ion-label>
</ion-chip>
uKioops
  • 269
  • 3
  • 8