How to check user agent in angular ?

In this post, we will show you how to check user agent in Angular. user-agent header is a string that contains information about the browser and operating system. It is set by the browser and sent to the server with every request. It can also be used to determine if the browser is a mobile device or a desktop browser or os version.

In core javascript we use window.navigator properties to get the user agent and in angular we also use the same because there is no alternatives for it.

this example of check user agent and get user agent in angular will work in all angular version including angular 2, angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13 and angular 14 application.

Simplest way to use check user agent is as follow

We will be using the navigator object to get the user-agent header.

if (window.navigator.userAgent.indexOf('Firefox') != -1) {
   alert('You are using Firefox.');
}

The above code will check for the Firefox browser. If the browser is Firefox, an alert will be displayed

Similarly, you can check for other browsers like Chrome, Safari, Opera, etc.

You can also check for mobile devices like iPhone, iPad, Android, etc.

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
alert('You are using an iPhone or iPod.');
}

Let’s take an example of it

Step 1 : Create an angular app

First step is to setup an angular app using below command

ng new example-app

Step 2: Create a Component

Create a component and add a method checkBrowserAgent

ng g c hello-world

Here we used to focusOut method to handle the input

import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css'],
})
export class HelloWorldComponent implements OnInit {
  
 agent = '';
  constructor() {
    this.agent = this.checkBrowserAgent();
  }

  checkBrowserAgent() {
    let userAgent = window.navigator.userAgent;
    let browserName;

    if (userAgent.match(/chrome|chromium|crios/i)) {
      browserName = 'chrome';
    } else if (userAgent.match(/firefox|fxios/i)) {
      browserName = 'firefox';
    } else if (userAgent.match(/safari/i)) {
      browserName = 'safari';
    } else if (userAgent.match(/opr\//i)) {
      browserName = 'opera';
    } else if (userAgent.match(/edg/i)) {
      browserName = 'edge';
    } else {
      browserName = 'No browser detection';
    }
    return browserName;
  }
  ngOnInit() {}
}

Step 3 : Create template and add html

Now, add simple html template with input field

<h2>Check user agent in angular Example</h2>
<h2>Browser name : {{agent}} </h2>