List of mixed type elements (different component in one collection)

Ionic Framework ionic-v3
1

Hi,

I have problems figuring out how to do the following in ionic 2. I receive a list from the server. The list contains a random (for the client) collection of a few different types of elements. I can construct a ionic 2 component for each type for user interaction. The question is, how can I select the appropriate component for each element and how to pass the data to it?

In ionic 1, I generate the HTML in the directives and then $compile and add the result to the DOM element. How can I do it in ionic 2 now that the compiler is gone (it is gone right?).

Thank you very much.

Lin

2

Do you tried ionic2 menu template?
It create an array of pages like:

    this.pages = [
              { icon:'md-clipboard', title: 'Interventions', component: Page1},
              { icon:'md-pricetags', title: 'Tickets', component: Page2 },
              { icon:'md-mail', title: 'Messages', component: Page3 } ];

openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }

I hope that it help you !

3

Hi Hichman,

Thank you for the answer. I have seen the example. It is different from my problem in that the client (Ionic implementation) decides the sequence of the element types here (in this case: Page1, Page2, Page3). In my case, the server makes the list decision and the client has to follow. And the server emits different lists all the time.

4

I’m confused by your use of the term “page”. In my mind, only one “page” can be active at once, so the notion of a “list of pages” doesn’t make sense. I could understand it if you’re talking about several components on one page, but it doesn’t sound like that’s what you want to do. If it is, you might be interested in this.

5

Hi rapropos,

Thanks for the answer. I used the Page example because Hichman used that as example. In general a bunch of pages with different types is conceptually the same thing as a bunch of different things on the same page.

On the other hand, the idea of a giant switch in the template is an interesting idea (although not the most elegant). I will think about it and maybe try it out later. Thank you very much.

6

Hi rapropos

the giant switch idea seems to work. I will have to hack some more code but they will also be better structured. Thank you very much.