Component inside ngSwitch not showing


#1

So far as I can tell, my component inside an ngSwitch container is just not loading! I’ve been hacking away at it all day, and I think I’ve narrowed it down to that. I’ve simplified the code inside my template to this:

ion-content padding>
  {{page}} <!-- test-->
  <div [ngSwitch]="page">
    <div class="container" *ngSwitchCase="'instructions'">
      <h3 text-center>Time to set up your device</h3>
    </div>

    <div class="container" *ngSwitchCase="'chooseNetwork'">
      <h3 text-center>Choose Network</h3>
      <appearance-animation-layout-5
        [data]="params.data"
        [events]="params.events">
      </appearance-animation-layout-5>
    </div>


  </div>

  End of Case Statement

  <appearance-animation-layout-5
    [data]="params.data"
    [events]="params.events">
  </appearance-animation-layout-5>

</ion-content>

Now, when this page loads, the page is set to instructions. At this point, params is null. So so component shows. But the Heading text shows OK. When the user clicks a button (I put it in the footer to debug), the page is changed. The new heading shows correctly, but no sign of my component (appearance animation). This worked fine before I put it in the container, so I stuck another instance of it outside to check. And sure enough, when the user clicks the button, up it comes. Absolutely no idea what is going on.

The component and the pages are all lazy loaded. My understanding of this is limited, but I’m following what I gather to be a correct recipe. And it works for everything else in my app. Anyone know what’s going on??? It’s causing me to turn purple and hold my breath for hours at a time while steam comes out of my ears.

I’ve run npm update -g cordova ionic so everything should be up to date…


#2

RIGHT. AFter much googling and a night’s sleep. I’ve figured it out. There is nothing wrong with my code. It’s the dodgy, POS appearance-animation-layout-5 component that I’ve used. I bought this from a Template UI provider. It was structured like this:

<ion-content> blah blah blah </ion-content>

However, it seems that since I also have ion-content in my parent template, the whole thing explodes in an unpredictable way (well, I’m sure it’s perfectly predictable. But I’m more focused on working out what does work, not what does not.

Lessons Learned today:

  1. Be extremely wary of third party code. It is often crap.
  2. only one ion-content tag per page component.
  3. Ionic docs are good. It does say in the ion-content docs : “only one per view component”, but realistically, how the heck are you supposed to avoid these gotchas. In fact, I have no idea why I thought to check this out, now that I think about it…

#3
  1. Be extremely wary of third party code. It is often crap.

Are you talking, of one of the billion, trillion, zapdusterillons companies?
Sorry, I am kidding. But maybe it helps to give the developer of this component a feedback, that he can makes it less crapy.

Best regrads, anna-liebt