I am building an app with angular. And the design that the UX designer gave me is not a traditional responsive site in the sense that components collapse underneath each-other depending on window size. There is basically a whole other layout for large screens and small screens. There are between 5-10 small components/directives that need to be added or removed from the DOM and then 2-4 large components of the site should be moved to one side or the other or removed completely. This brings me to my question. What is the right way to handle this situation? I have looked at @HostListener to programmatically remove or add the items depending on a resize events. I have also thought about going with media queries and simply hiding the elements depending on screen size. I am tempted to go the Host listener route, because it seems messy to hide a bunch of stuff or show it with media queries. What do you think? What is the best way to solve this problem?
-
1I think this is primarily opinion-based question as there are many different options. What I would do is create responsive service which would check window width and return mode and depending on the mode returned show/hide stuff on the page. – mxr7350 May 03 '18 at 11:58
2 Answers
CSS in my opinion is the easiest solution. Just go with media calls or use something like boostsrap that has those built-in with classes like, .hide-sm etc.
Here is a link for the css method and a hostlistener method (courtesy of this answer): https://stackblitz.com/edit/angular-rfttks
You can use @HostListeners and *ngIf statements if you like, but that seems like a lot of extra work for the same basic functionality. I also don't believe it would have any real benefit over hiding it via css.
Another thing to remember is why. As we've discussed in the comments, there are memory and network implications to a few options. Another possibility is just restyling the components based on screen size.
- 4,285
- 15
- 63
- 115
-
-
-
No, I mean I can test it out, but it seems messy to hide a component on one side of the screen while showing it on the other side of the screen, when it is almost the same html. Also I am worried that somehow it could create whitespace thus screwing up the alignment with other components. – slipperypete May 03 '18 at 12:02
-
There are two ways of doing it, `visibility: hidden` will give you white space, and `display: none` will not. – Jeff May 03 '18 at 12:05
-
Ok thanks, gonna talk with my team a bit more, I appreciate the input. – slipperypete May 03 '18 at 12:06
-
Another aspect of the problem is that this design is already using like 10 subscriptions to observable emitters hiding or showing things based on user input... I have a service which handles this already so it doesnt seem like that much extra work to go a bit further and develop this service a bit more to handle the layout with screen size. – slipperypete May 03 '18 at 12:08
-
Going with this solution. You can add a class to the component selector which will apply display: none from outside the component and it seems that no whitespace is applied. So yeah seems like a good solution. – slipperypete May 03 '18 at 12:28
-
compared to the hiding approach with css, the `*ngIf` statement will in fact remove the components from the DOM and also from the memory, angular basically removes it from the runtime completely. If you're having lots of high memory usage components with huge DOM structures, it might be a good idea to dig a bit deeper and try to remove it completely. Otherwise the css hiding should be totally fine. – Benedikt Schmidt May 03 '18 at 12:40
-
It will remove it from memory, so if that's a concern, go for it. But it won't speed up the download time of the page. For something like that you don't have to do a lazy load... Which I'm not sure how to do that for a component. – Jeff May 03 '18 at 13:34
Depends on what do you want: 1) remove: use *ngIf 2) hide: css -> using opacity or visibility
- 640
- 4
- 9