Angular2 Web vs Mobile TemplateURL

Question

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?

Answer 1

You could create global function to resolve templateURLs:

function getTemplateURL(url:string){ /* check browser, etc. */ };

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