ons-list-item hides class

vgriffin

Assume CSS contains:
.my-class { background-color: pink; }

If I’m using ul/li with Angular 4, the following code gives each list item a pink background

<ul>
  <li class="my-class" *ngFor="let item of items">
    {{item}}
  </li>
</ul>

I had hoped and expected ons-list /ons-list-item to behave the same way, so the code below would give each list item a pink background.

<ons-list>
  <ons-list-item class="my-class" *ngFor="let item of items">
    {{item}}
  </ons-list-item>
</ons-list>

It doesn’t, but the following code does

<ons-list>
  <ons-list-item *ngFor="let item of items">
    <div class="my-class">
      {{item}}
    </div>
  </ons-list-item>
</ons-list>

The problem is that the generated code for each {{item}} is wrapped in

<div class="center list-item__center">
</div>

The result is that the {{item}} is set to a style over which I have no control in the <ons-list-item>

I’m using ngx-onsenui 4.0.0-rc.1 and have tried onsenui 2.3.3 and onsenui 2.5.3 with the same results. (I patched the package.json of ngx-onsenui to use the later version.) Obviously, the code above is a fragment of my actual code.

Ideally, the ons- components would behave like the standard ones on which they are based. I appreciate that frameworking “magic” can make this difficult, but it took hours to figure out what was happening and to work around it!

Fran Diox

@vgriffin That “magic” is actually described in the guide. It is necessary in order to provide borders, spacing and an easy API.

To be honest, I’m not sure about ngx-onsenui but in vanilla or other bindings, applying a background-color to the main ons-list-item works well since the sub items don’t alter the color.

vgriffin

@Fran-Diox
It explicitly doesn’t work on the current version of the wrapper for Angular 2+. It may be an issue related to processing *ngFor. I found the problem when I tried to affect the background-color by attaching the class to the ons-list-item and having my display come out in white-on-white…

This version is 4.0.0.rc1, so they should be able to deal with it!

ons-list-item hides class browsing