Awesome

<p align="center"> <a href="https://github.com/Celtian/ngx-if-platform" target="blank"><img src="assets/logo.svg?sanitize=true" alt="" width="120"></a> <h1 align="center">NgxIfPlatform</h1> </p>

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

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

🔧 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

All contents are licensed under the MIT license.