2

I have a SPA that needs to display my app in two completely different ways depending on the client device.

One shows a floorplan of my house with lightbulb icons to switch on/off my lights (and later on more information), rendered on a canvas using isometric projection.

The other (mostly for mobile) shows the same lightbulb icons alongside a name in a simpler list/hamburger menu.

I don't want to limit either device-type to the view I intended, but what is the best way of completely replacing the component based on device/selected view?

Should I create two components and move shared logic to services/classes? Or should I hide the unneeded component (I don't want to waste resources rendering the canvas or running the logic needed to render it)

Troels Larsen
  • 4,462
  • 2
  • 34
  • 54

1 Answers1

2

If you use *ngIf or similar, then there is nothing rendered if the expression is false while [hidden]="..." causes HTML to be rendered.

Moving logic to services is a good practice anyway.

You could also load different router configuration depending on the view size See also New Angular2 router configuration. This way you could load entirely different components for different view sizes.

(It looks like this will be improved in next versions for example to only load new child routes for a component, there are also discussions to provide an API to allow to add/remove single routes)

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • I have all logic in services already except the actual isometric projection, which won't be needed for the list and building the objects needed. Thanks! – Troels Larsen Aug 04 '16 at 14:34