CODEWITHSUNDEEP
angulartypescript
Udi Mazor
Udi Mazor

Reputation: 1826

One Component with different views

I have a component which I want to have one view for desktop devices and another view for mobile devices. I will have a flag in a service which tells me whether the user device is mobile or desktop device. The state and the logic are the same in both of the views. The desktop view should show the data in a table while the mobile view should show the data in blocks.

What is the best way to implement this behavior?

Upvotes: 3

Views: 1609

Answers (3)

Bob Kadadia
Bob Kadadia

Reputation: 11

@Udi You could go on your current path (in which case other answers have addressed the options), or better yet, leverage Flex layouts to create responsive templates that are dynamic without the need for the unneeded code, structural directives and create multiple views to maintain.

I am a really big fan of @angular/flex-layout. Here are a few links to that will get you off the ground quickly (if you are new to it) or you can dive into the github repo for @angular/flex-layout to get start coding away.

Great detailed into to Flex. https://medium.freecodecamp.org/even-more-about-how-flexbox-works-explained-in-big-colorful-animated-gifs-a5a74812b053

Cheatsheet: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

@angular/flex-layout github page/repo https://github.com/angular/flex-layout/wiki/Live-Demos

Best of luck!

Upvotes: 1

Flow
Flow

Reputation: 580

you can use the *ngIf directive in your template in this way:

yout-componant.componant.html (template):

<div *ngIf="desktopUser">
  // whatever your html is for desktop user
</div
<div *ngIf"!desktopUser">
  // whatever your html is for other device
</div>

Upvotes: 1

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

One way is if you are having flag in service which tells you about the device, then you can send that flag along with other data to component and then from the component file you can send that flag to template file for having conditional structure in it.

Upvotes: 1

Related Questions