Angular 2 different views based on Desktop or Mobile

Question

I\'m working on web site, that has slight different functionality based on version desktop/mobile.

I tried to apply it via @View, but it looks like this decorator is now

Answer 1

The ng2-responsive package should cover your needs: https://www.npmjs.com/package/ng2-responsive

I haven't used it extensively yet, but it seems to be doing a decent job.

@View was merged into @Component (ages ago). @Component should be the only decorator you need.

Answer 2

At the moment the best to replace @View decorator is using an *ngIf like this:

<div *ngIf="isMobile">
    modile stuff
</div>
<div *ngIf="!isMobile">
    desktop stuff
</div>

Answer 3

@Component({
  selector: 'my-component',
  templateUrl: "./" + (window.screen.width > 900 ? 
                     "my-component.desktop.html" : 
                     "my-component.mobile.html"),
  styleUrls: ['./my-component.css']
})