Different views for Desktop and mobile Angular
// Route guards would be a good solution for this purpose.
// The MobileGuard would look like this :
export class MobileGuard implements CanActivate {
constructor(private _router: Router, private _mobileService: MobileService) {}
canActivate(): boolean {
const isMobile = this._mobileService.isMobile();
if(!isMobile) {
this._router.navigate(['/desktop']);
}
return isMobile;
}
}
// The same for the DesktopGuard.
// The user trying to access any of the routes, would be redirected to the right one.