Ngx-if-platform NPM

Angular directive for conditional display based on platform
✓ Angular 19 compatible

Here's the demo or stackblitz live preview or codesandbox live preview

Lightweight
No dependencies!
Directive way

🛠️ Install

Use yarn (or npm) to install the package

yarn add ngx-if-platform

Add NgxIfPlatformModule (or specific directive) into your imports

import { NgxIfPlatformModule } from 'ngx-if-platform';

@Component({
  standalone: true,
  imports: [NgxIfPlatformModule /* , ... */],
  // ...
})

  import { NgxIfPlatformModule } from 'ngx-if-platform';

  @NgModule({
   // ...
   imports: [
     // ...
     NgxIfPlatformModule
   ]
  })

🚀 Quick start

Example code

<!-- ngxIf -->
<div *ngxIfBrowser>Is browser</div>
<!-- ngxIf can be disabled  -->
<ng-template [ngxIfServer]="true">Is server (disabled)</ng-template>
<!-- ngxIf else statement  -->
<ng-template [ngxIfServer] [ngxIfNotServer]="notServer">Is server</ng-template>
<ng-template #notServer>Not server</ng-template>

Result

  Is browser
  Is server (disabled)
  Not server

🛠️ Options

There are these directives: ngxIfBrowser, ngxIfServer, ngxIfWorkerApp, ngxIfWorkerUi

Directive & attributes

Option	Type	Default	Description
ngxIfBrowser	boolean	true	Directive can be disabled
ngxIfNotBrowser	templateRef	none	TemplateRef used if confition do not match
ngxIfServer	boolean	true	Directive can be disabled
ngxIfNotServer	templateRef	none	TemplateRef used if confition do not match