Introduction
In this article, we learn the steps to get the browser version and browser name in the Angular application. Sometimes you have a requirement to get a browser version in angular, or you might also need to get a browser name in angular. We can easily detect if the Angular application is loaded inside the IE Legacy, Edge, Firefox, Chrome, Safari, Opera, or any other browser. In this step-by-step article, we learn steps to add a reusable method in the angular application and easily detect the browser and its version.
Note. Before going through this session, please visit my previous article on Angular applications as mentioned below.
Step 1. Create a service to check the browser
We can create a separate service in your Angular application by executing the below command.
D:\EmployeeManagement\CallWebAPIAngular> ng g s services/detect-browser
Then you can service and its related files are shown below
PS D:\EmployeeManagement\CallWebAPIAngular> ng g s services/detect-browser
CREATE src/app/services/detect-browser.service.spec.ts (393 bytes)
CREATE src/app/services/detect-browser.service.ts (142 bytes)
Step 2. Configure browser name with version detection method
After creating the DetectBrowserService, add the getBrowserNameAndVersion() method to return an object with name and version keys. This method will fetch the User-Agent strings on the browser in which the Angular application is loaded.
Open the ~app\services\detect-browser.service.ts file and add as shown below.
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DetectBrowserService {
constructor() { }
getBrowserNameAndVersion() {
var ua = navigator.userAgent,
tem,
M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if (/trident/i.test(M[1])) {
tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
return { name: 'IE', version: (tem[1] || '') };
}
if (M[1] === 'Chrome') {
tem = ua.match(/\bEdg\/(\d+)/);
if (tem != null) {
return { name: 'Edge(Chromium)', version: tem[1] };
}
tem = ua.match(/\bOPR\/(\d+)/);
if (tem != null) {
return { name: 'Opera', version: tem[1] };
}
}
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
if ((tem = ua.match(/version\/(\d+)/i)) != null) {
M.splice(1, 1, tem[1]);
}
return {
name: M[0],
version: M[1]
};
}
}
Here, we detect the name and version of the browser by creating a new service with a common method. The getBrowserNameAndVersion method returns an object with name and version keys. This method is fetching the User-Agent string that provides the browser information.
Step 3. Detect browser name with version
Now, we will import the DetectBrowserService in the AppComponent‘s constructor function. The service instance method named getBrowserNameAndVersion() will assign the name and version object to the browserNameAndVersion variable.
Open the app.component.ts file and add as shown below
import { Component } from '@angular/core';
import { DetectBrowserService } from './services/detect-browser.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Display Browser Name & Version';
public requiredVersion = 98;
public isBrowserOutdated: boolean | undefined;
public browserVersion = '';
browserNameAndVersion: any;
constructor(
detectBrowserService: DetectBrowserService
) {
this.browserNameAndVersion = detectBrowserService.getBrowserNameAndVersion();
this.browserVersion = this.browserNameAndVersion.version;
if (parseFloat(this.browserNameAndVersion.version) < this.requiredVersion) {
this.isBrowserOutdated = true;
}
}
}
Here we configure for displaying browser name and version along with browser up-to-date or not.
this.browserNameAndVersion = detectBrowserService.getBrowserNameAndVersion();
this.browserVersion = this.browserNameAndVersion.version;
if (parseFloat(this.browserNameAndVersion.version) < this.requiredVersion) {
this.isBrowserOutdated = true;
}
Step 4. HTML template to show browser name with version
Update the HTML template of AppComponent to display the browser name and version. Open the app.component.html file and update it as shown below:
Snigdha RathPosted Feb 20, 2024, 5:55 AM
Nice article. Thank you for sharing.