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')
})

Answer 2

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.