ngx-if-platform

Angular directive for repeating HTML element by count

Usage no npm install needed!

<script type="module">
  import ngxIfPlatform from 'https://cdn.skypack.dev/ngx-if-platform';
</script>

README

NgxIfPlatform

npm version Package License NPM Downloads Build & Publish codecov stars forks HitCount

Angular directive for conditional display based on platform

Angular 13, Ivy and SSR 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
  1. Add NgxIfPlatformModule into your module imports
  import { NgxIfPlatformModule } from 'ngx-if-platform';

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

Compatibility

Angular ngx-if-platform Install
>= 12 1.x yarn add ngx-if-platform
>= 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

Dependencies

None

License

Copyright © 2021 - 2022 Dominik Hladik

All contents are licensed under the MIT license.