Detect if device is iOS 13/14 - Angular 8, 9, 10, 11, and 12.x

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.

  }

    ...

}



ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^