Angularjs One component multiple views(Html+css)

Question

I need to figure out how I can have different views(html+css) for a component. A lot of people say that it's better to have multiple components for each for each of those views and then use a service to interact but my case is as follow: I have a controller with a view that is basically a layout. Say my layout has 3 panes on top and one pane in the bottom. Now I have button in my view to change the layout to two panes on top and two panes on the bottom. So basically my data does not change. Its just a change in the html and css. also if the first layout is filled with some data I dont want to change it or reinitialize it when changing the layout since the change is only a change on layout not the data.

I have difficulty figuring out how I can achieve this in angular2. Any ideas?

ErvTheDev · Accepted Answer · 2016-02-23 09:39:07Z

2

so you want to add html and css or just change the actual template?

If you just want to change the actual html , i personally suggest that you use states instead of different views. And based on the states move the html around. I had the same issue myself and i solved it by rethinking the layout and ended in finding a simpler layout structure.

Hope this helps. Enjoy coding.

answered Feb 23, 2016 at 9:39

ErvTheDev

4,5373 gold badges18 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Günter Zöchbauer · Accepted Answer · 2016-02-22 16:03:13Z

0

You can have two views in one template and switch between them by setting a flat:

<div *ngIf="firstLayout">
  <!-- first layout -->
</div>
<div *ngIf="!firstLayout">
  <!-- first layout -->
</div>

answered Feb 22, 2016 at 16:03

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

2 Comments

user3205675 Over a year ago

I have thought about this as well. The question is is this the most performant way? I was thinking maybe there is a way(sort of modular) where I can load a specific view based on my input layout. Otherwise It will be a big file with a lot of redundancy since most of the elements in these views are the same.

Günter Zöchbauer Over a year ago

You can use DynamicComponentLoader or the router as well but performance mostly depends on the current use case. Router supports lazy loading of components which might be more efficient if usually only one option is used by one client. If the user switches often during one session *ngIf might be more efficient.

Collectives™ on Stack Overflow

Angularjs One component multiple views(Html+css)

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related