Making ion-item and ion-item-sliding decision based on screen size


#1

I’ve got some thoughts about how to approach this, but I’m looking for input and thoughts.

I have an ion-list of items. In the mobile interface, some of the extra controls (favorite, etc) are underneath, and you slide the item to the right to expose it. In the larger interface, where there’s room, I can just stick them in as buttons.

I’m conditionally rendering in the buttons based on screensize (*ngIf="!media.xs"), but these items are still sliding in the desktop view. I could easily do an *ngIf or *ngSwitch to toggle between ion-item and ion-item-sliding, but that ends up with a fair bit of repeated content. Alternatively, I could just leave the items as sliding, since there’s no real harm in having them slide around. I’m mostly wondering how other people approach this problem - I could do some complicated template projection thing that injected stuff inside of either the item or item-sliding based on the screen width, but that’s a fair bit of trouble and could end up not saving any code really.

relatedly - I was looking for something that could respond to screen width changes, and it doesn’t seem like there’s any data source provided in the ionic framework for this? I ended up writing my own thingy that has a couple of Observables on it so you can observe “is the screen extra small” or “is the screen at least medium” or whatever, since if nothing else it’s good to respond to portrait - landscape things, but also shove things out of the way if the user resizes the window in a regular desktop interface. Did I just miss something? It looks like there’s something in platform but that doesn’t update on changes.