Is there a way in angular2 to select a device-based template

Question

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

Answer 1

There are plans, but it remains to be decided whether this will actually be implemented.
Currently, you can use multimedia queries and, for example, ngSwitch to display different parts of a view depending on the size of the device or screen.

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 can use CSS @imports with media queries for this.

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

Example:

Angular2:

 @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 device specific styles in device1.css and device2.css.

For more on CSS @imports, see https://developer.mozilla.org/en/docs/Web/CSS/@import .

Answer 3

Alternative using angular / flex-layout package with

FxHide API and fxShow API

Example

 <div fxShow fxHide.xs="false" fxHide.lg="true"> ... </div> 

When activated breakpoint:

• xl , then override the default fxShow; therefore div is displayed
• lg , then div is hidden (since value === 'true')
• md , then go back to the default fxShow file, so the div is displayed
• sm , then override the default fxShow; therefore div is displayed
• xs , then div is displayed (since value === 'false')

This is a bracketing list.

or using ObservableMedia

Example

 import {MediaChange, ObservableMedia} from "@angular/flex-layout"; const PRINT_MOBILE = 'print and (max-width: 600px)'; @Component({ selector : 'responsive-component', template: ` <div class="ad-content" *ngIf="media.isActive('xs')"> Only shown if on mobile viewport sizes </div> ` }) export class MyDemo implements OnInit { constructor(public media: ObservableMedia) { } ngOnInit() { if (this.media.isActive('xs') && !this.media.isActive(PRINT_MOBILE)) { this.loadMobileContent(); } } loadMobileContent() { /* .... */ } } 

• print and (max-width: 600px) are mediaQuery for printing viewport sizes on mobile devices.
• xs is an alias associated with the size of the mediaQuery media portal.