Best practice for a list of objects with different attibutes (derived from a base)


As an exemple, I will use the car analogy.

Let’s say that I want a list of car models. Each element in the list is a car (have some basic attributes), but it has some very specific characteristics (specific attributes).

This can be done in many different ways:

  1. A big single car class which takes into account the details of each model.
  • The class would be very complex, with lot of case-like structures.
  • The template would also be very complex because it needs to include lots of *ngIf to show only the required attributes according to the model.
  1. A component for each model and a simple car class.
  • All class models will be simple, because each one only take care of its own details.
  • The car class also will be simple, and provide a template with an *ngIf for each car model.
  1. Dynamic templates selected at a car level
  • A template for each car model could do the trick.
  • However, AFAIK dynamic templates are not supported at this moment by Angular/Ionic.

The second approach seems much better, however it has a big flaw. As it introduces a new component inside the list level. So most Ionic component styles won’t work in the model template: ion-item, ion-item-sliding ,for instance.

So, is there a way to “remove” the extra component level without resorting to the ugly single class approach monster?

Surely many developers are displaying this kind of non-uniform object lists. What kind of solution are you guys implementing?