Is there a way in angular2 that a template is selected based on the device

Question

I would like to have 1 per device template for views in angular2 and for some views there may be 1 for all the devices. Is it possible in angular2 based on the browser user-agent

Answer 1

There are plans but it has yet to be decided if it will actually be implemented.
Currently you can use media queries and for example ngSwitch to show different parts of a view depending on the device or screen dimensions.

See also

• https://github.com/angular/angular/issues/6328
• https://github.com/angular/angular/issues/1239
• https://github.com/angular/angular/pull/4566

Answer 2

You could use CSS @imports with media queries for this.

All you need to do is to create a separate CSS file for each device and then import it in your template style.

Example:

Angular2 component:

@Component({
  selector: 'my-comp',
  template: `...`,
  styleUrls: ['./style.css']
})

In style.css:

@import url("device1.css") screen and (min-width: 300px);
@import url("device2.css") screen and (min-width: 800px);

And then the device-specific styles in device1.css and device2.css.

See https://developer.mozilla.org/en/docs/Web/CSS/@import for details to CSS @imports.