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:
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:
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);
}
}
<div *ngIf='isB'><strong>GeeksforGeeks.</strong></div>
<div *ngIf='isB'>isBrowserPlatform | angularJs.</div>
Output:
Reference: https://v17.angular.io/api/common/isPlatformBrowser