This article will help us to Detecting iOS (both <12, and 13+) and this sets the variable isIOSDevice to true or false i.e.
this.isIOSDevice = this.detectIOS();
//return true or false
See
the Example 1 in detail,
export
class NavMenuComponent
{
isIOSDevice= false;
constructor(private router: Router) {
}
ngOnInit() {
// return true if iOS
devices otherwise false
this.isIOSDevice
= this.detectIOS();
}
detectIOS() {
var
isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
var isAppleDevice = navigator.userAgent.includes('Macintosh');
var isTouchScreen = navigator.maxTouchPoints >= 1; // true for iOS 13 (and hopefully beyond)
return
isIOS || (isAppleDevice && (isTouchScreen || this.iOS1to12quirk()));
}
iOS1to12quirk() {
var
audio = new Audio(); //
temporary Audio object
audio.volume = 0.5; //
has no effect on iOS <= 12
return
audio.volume === 1;
};
}
For HTML Page: If page
render on iOS devices this link will be display otherwise not display
<li
class="nav-item" [routerLinkActive]="['link-active']"
*ngIf="isIOSDevice" (click)="toggleMobile()">
<a
class="nav-link" [routerLink]="['/ask-me]">Ask
Me on Code-Sample.com</a>
</li>
See
the Example 2 in detail,
We can also get using
the ngx-device-detector. The Latest
version available for each version of Angular (>= 12.x)
An Angular 6+ powered
AOT compatible device detector that helps to identify browser, os and other
useful information regarding the device using the app. The processing is based
on user-agent.
Install: > npm i ngx-device-detector
Import: > Import Device Detector Service in you component i.e.
import { Component } from '@angular/core';
...
import { DeviceDetectorService } from 'ngx-device-detector';
...
@Component({
selector: 'home', // <home></home>
styleUrls: ['./home.component.scss'],
templateUrl: './home.component.html',
...
})
export class HomeComponent {
deviceInfo = null;
...
constructor(..., private http:
Http, private deviceService:
DeviceDetectorService) {
this.epicFunction();
}
...
epicFunction() {
console.log('hello
`Home` component');
this.deviceInfo = this.deviceService.getDeviceInfo();
const isMobile = this.deviceService.isMobile();
const isTablet = this.deviceService.isTablet();
const isDesktopDevice = this.deviceService.isDesktop();
console.log(this.deviceInfo);
console.log(isMobile); // returns if
the device is a mobile device (android / iPhone / windows-phone etc)
console.log(isTablet); // returns if
the device us a tablet (iPad etc)
console.log(isDesktopDevice); // returns if the app is running on a Desktop browser.
}
...
}
