This article will help us to Detecting iOS (both isIOSDevice to true or False i.e.
this.isIOSDevice = this.detectIOS(); //return true or false
See the Example 1 in detail,
exportclass NavMenuComponent{
Related Articles
isIOSDevice= false;
constructor(privaterouter: Router) {
}
ngOnInit() {
// return true if Ios Devices otherwise false
this.isIOSDevice = this.detectIOS();
}
detectIOS() {
varisIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
varisAppleDevice = navigator.userAgent.includes('Macintosh');
varisTouchScreen = navigator.maxTouchPoints >= 1; // true for iOS 13 (and hopefully beyond)
returnisIOS || (isAppleDevice && (isTouchScreen || this.iOS1to12quirk()));
}
iOS1to12quirk() {
varaudio = new Audio(); // temporary Audio object
audio.volume = 0.5; // has no effect on iOS
returnaudio.volume === 1;
};
}
For HTML Page: If page render on iOS devices this link will be display otherwise not display
liclass="nav-item" [routerLinkActive]="['link-active']"*ngIf="isIOSDevice" (click)="toggleMobile()">
aclass="nav-link" [routerLink]="['/ask-me]">Ask Me on Code-Sample.coma>
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', //
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.
}
...
}