NgxIfPlatform

Angular directive for conditional display based on platform

✓ Angular 18 compatible

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

• Lightweight
• No dependencies!
• Directive way

🛠️ Install

1. Use yarn (or npm) to install the package

yarn add ngx-if-platform

2. Add NgxIfPlatformModule (or specific directive) into your imports

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

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

or

  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

🔧 Compatibility

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

🪪 License

Copyright © 2021 - 2024 Dominik Hladik

All contents are licensed under the MIT license.