CODEWITHSUNDEEP
angularangular2-templateangular2-directives
user1458025
user1458025

Reputation: 51

Angular2, multiple views for a component?

Hi I have a webpage with multiple layouts that I want to switch to. Similar to codepen.io. What is the best way to do it in angular2?

Say I have 4 layouts. I can put *ngIf="layout1" and put first layout and then *ngIf="layout2" and put the second layout, and so forth. But is it the best way? Note that when changing the layout, both html and css changes.

Upvotes: 4

Views: 2361

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657068

There is also ngSwitch which is convenient when there are more than one or two options. This way you have everything in one component. I think it's a good option if it is probable that switching between layouts is common and done often within one user session.

If this is mostly a one-off decision (for example based on the screen dimenions) one of the following options might be a better fit.

You can also use DynamicComponentLoader. Each layout is packed in a component and you add the component that fits the current selection.
See also http://www.syntaxsuccess.com/viewarticle/loading-components-dynamically-in-angular-2.0

Another way is using the router to add a component depending on the Url or Url parameters.
See also https://angular.io/docs/ts/latest/guide/router.html

Upvotes: 1

Related Questions