Angular10 isPlatformBrowser() Function

In this article, we are going to see what is isPlatformBrowser in Angular 10 and how to use it.

The isPlatformBrowser is used to get a platform id that represents a browser platform

Syntax:

isPlatformBrowser(platformId);

NgModule: Module used by isPlatformBrowser is:

CommonModule

Return Value: returns a Boolean Value stating whether a platform id represents a browser platform.

Approach:

Create the angular app to be used
Import isPlatformBrowser from @angular/core to the project.
In app.component.ts define the object which holds the Boolean value.
serve the angular app using ng serve to see the output

Example 1:

app.component.ts

import { Component, Inject } 
from '@angular/core';
import { PLATFORM_ID } 
from '@angular/core';
import { isPlatformBrowser }
from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  isBrowser: boolean;

  constructor( @Inject(PLATFORM_ID) platformId: Object) {
    this.isBrowser = isPlatformBrowser(platformId);
    console.log(this.isBrowser)
  }
}

Output:

Example 2:

app.component.ts

import { Component, Inject } 
from '@angular/core';
import { PLATFORM_ID }
from '@angular/core';
import { isPlatformBrowser } 
from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    isB: boolean;
  
    constructor( @Inject(PLATFORM_ID) platformId: Object) {
      this.isB = isPlatformBrowser(platformId);
      
    }
}

app.component.html

<div *ngIf='isB'><strong>GeeksforGeeks.</strong></div>

<div *ngIf='isB'>isBrowserPlatform | angularJs.</div>

Output:

Reference: https://v17.angular.io/api/common/isPlatformBrowser

Angular10 isPlatformBrowser() Function

Explore