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.