13640

Angular2 Web vs Mobile TemplateURL

I'd like to reuse components for a web version of my website as well as a mobile version. The websites are vastly different so responsive design is not feasible.

Ideally, there would be a way to provide multiple templateUrls based on the screen resolution, but I don't think something like this exists.

Example:

@Component({ selector: 'multiplatform-component', templateUrl-sm: 'app/sm.html', templateUrl-md: 'app/md.html', })

What is the best way to approach this?

Answer1:

You could create global function to resolve templateURLs:

function getTemplateURL(url:string){ /* check browser, etc. */ }; @Component({ selector: 'multiplatform-component', templateUrl: getTemplateURL('app/sm.html') })

Answer2:

The reusable part of a component usually resides in its class.

You could create a reusable class, that your different components would inherit:

export class ReusableClass{ } @Component({ selector: 'platform1', templateUrl: 'platform1.html', }) export class Platform1 extends ReusableClass{ } @Component({ selector: 'platform2', templateUrl: 'platform2.html', }) export class Platform2 extends ReusableClass{ }

All the ReusableClass methods and properties could then be accessible to the Platform1 and Platform2 components.

Only the selectors and templates would differ.

Recommend

  • How to label the weekly chart in ASP.Net chart control
  • Click outside div - when div has buttons that fires events - angularjs
  • How I can add attribute to img tag in Pelican
  • Leaflet map not sizing to dimensions of target element
  • Trouble implementing Meteoric (Meteor-Ionic) package — Ionic styling not showing up
  • Reusable MVC code: handling value types in linq expressions
  • Generic EditorTemplate for an Enum with Text Select Option Value
  • Extending Boostrap to include extra small inline form
  • “stack level too deep” When Processing Carrierwave Image Versions in Nested Form
  • Create CSV file from c#: extra character in excel
  • AngularJS- How to pass data from one controller to another on ng-click()?
  • How do I install these PHP extensions on Ubuntu?
  • href inside href [duplicate]
  • Display Current Video in Windows Phone 8 using AudioVideoCaptureDevice?
  • Hatch area using pcolormesh in Basemap
  • How to replace TouchesBegan with UIGestureRecognizer
  • how to remove a div with same ids but display='block' and display='none' in JAVa
  • Jquery popup on mouse over of calendar control
  • AndEngine Applying Transparancy to AndEngine View
  • Using a canvas object in a thread to do simple animations - Java
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • How to add git credentials to the build so it would be able to be used within a shell code?
  • Groovy: Unexpected token “:”
  • How to create a file in java without a extension
  • Typescript - Unable to get 'import' statement to function
  • C++ Partial template specialization - design simplification
  • Avoid links criss cross / overlap in d3.js using force layout
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • Updating server-side rendering client-side
  • MySQL WHERE-condition in procedure ignored
  • Symfony2: How to get request parameter
  • How to get next/previous record number?
  • Akka Routing: Reply's send to router ends up as dead letters
  • Is there a mandatory requirement to switch app.yaml?
  • Python: how to group similar lists together in a list of lists?
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • JaxB to read class hierarchy
  • Observable and ngFor in Angular 2