Weird behaviour of magically added elements within ion-item

@HinderiksR wrote:

Hi,

I am trying to create a card with a header and multiple avatars within. For some weird reason when i put the avatars inside a custom directive it in run time also adds 2 divs with item-inner and input-wrapper in which a ion-label is placed (which is no where to be found in the actual code) within this ion-label the avatars appear. but because of all the add css by ion-label this goes completely wrong.

I have absolutely no idea why these elements appear out of no where. The code goes as follows:

<ion-item>
        <child-avatar *ngFor="let child of data.children" [child]="child"></child-avatar>
</ion-item>

with child-avatar containing:

<ion-avatar item-start>
  <img [src]="childAvatar" />
</ion-avatar>

however this results in this html code:

<ion-item class="item item-block item-ios">
<div class="item-inner">
<div class="input-wrapper">
<!--bindings={  "ng-reflect-ng-if": "true"}-->
<ion-label class="label label-ios">
        <!--bindings={  "ng-reflect-ng-for-of": "[object Object]"}-->
        <child-avatar ng-reflect-child="[object Object]">
           <ion-avatar item-start="">
           <img src="*removed src*">
          </ion-avatar>
        </child-avatar>
 </ion-label>
</div>
<!--bindings={ "ng-reflect-ng-if": "false"}-->
</div>
<div class="button-effect">
</div>
</ion-item>

Posts: 1

Participants: 1

Read full topic