Ngx-if-platform NPM

Angular directive for conditional display based on platform
✓ Angular 17 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
   ]
  })

Compatibility

Angular	ngx-if-platform	Install
>= 14	2.x	`yarn add ngx-if-platform`
>= 12	1.x	`yarn add ngx-if-platform@1`
>= 5 < 13	0.x	`yarn add ngx-if-platform@0`

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
ngxIfWorkerApp	boolean	true	Directive can be disabled
ngxIfNotWorkerApp	templateRef	none	TemplateRef used if confition do not match
ngxIfWorkerUi	boolean	true	Directive can be disabled
ngxIfNotWorkerUi	templateRef	none	TemplateRef used if confition do not match