Is there any ionic html tag that does not effect?

I am facing a scenario in which I am displaying my data in ion-item using a loop. Now I want if data is not empty then item should be visible else hide. For this purpose I am using a div and putting if condition on. But problem is that when I apply div it change the style of my item. Is there any non-affected html tag that solve my problem?
My code is below

    <ion-item *ngFor="let item of product| async">
      <div *ngIf="item">
        <ion-thumbnail item-start>
          <img src="{{item.image}}">
        </ion-thumbnail>
        <strong>{{item.name}}</strong>
      </div >
    </ion-item>

first check the length of products

Hello,

maybe ng-container is usefull for you. https://alligator.io/angular/ng-container-element/

Maybe your div breaks your layout, because it is a block element. Maybe it helps when you unblock div with the use of css flex box https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

Best regards, anna-liebt

Try span with *ngIf …

Both div and span do same in my case.

Hmmm. And a simple p tag?

Why don’t you put the *ngIf directly on the ion-item?

Hello Anna,
I have tried this but it does not work.

please try this.

PS: span works perfectly for me. maybe your error is at an other place.

Hello,
it was a guess that div as block element breaks your layout. In this case each inline element or to inline element converted block element should work.

Untouched div and untouched span aren’t doing the same, div is a block element, span is a inline element. So maybe it helps if you show all related code, maybe it’s only a typo or … or …

best regards, anna-liebt

I’m not sure but the ngIf has no effect right?

When the product is empty nothing happens.

When product is not empty item is always an object. Isn’t it.

So try to remove your div completely.

Hello,
as reading your question again, I have maybe understood it wrong.

Maybe you can provide a picture how it is and how it should be.

*ngIf remove the element and its children from the dom, if you want hide something you should maybe use [hidden]=‘true’

Best regards, anna-liebt

Seriously, the solution is to put the *ngIf on ion-item, or filter out null items in your controller.

2 Likes

Because both *ngFor and *ngIf not working at a time

Then I would recommend filtering out the null items in your controller.

I changed the structure and now I am wrapping my item in ion-col and putting if condition on it.

    <ion-row *ngFor="let item of product| async">
      <ion-col *ngIf="item">
        <ion-item>
          <ion-thumbnail item-start>
            <img src="{{item.image}}">
          </ion-thumbnail>
          <strong>{{item.name}}</strong>
        </ion-item>
      </ion-col>
    </ion-row>

Thanks to all.