Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/celtian/ngx-if-platform

Directive for conditional display based on platform
https://github.com/celtian/ngx-if-platform

angular library

Last synced: about 10 hours ago
JSON representation

Directive for conditional display based on platform

Host: GitHub
URL: https://github.com/celtian/ngx-if-platform
Owner: Celtian
License: mit
Created: 2021-10-02T11:04:45.000Z (about 3 years ago)
Default Branch: master
Last Pushed: 2024-10-18T20:38:02.000Z (29 days ago)
Last Synced: 2024-11-12T15:06:05.640Z (4 days ago)
Topics: angular, library
Language: TypeScript
Homepage: https://celtian.github.io/ngx-if-platform
Size: 2.62 MB
Stars: 5
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md

Awesome Lists containing this project

README

        


  

  
NgxIfPlatform


[![npm version](https://badge.fury.io/js/ngx-if-platform.svg)](https://badge.fury.io/js/ngx-if-platform)

[![Package License](https://img.shields.io/npm/l/ngx-if-platform.svg)](https://www.npmjs.com/ngx-if-platform)

[![NPM Downloads](https://img.shields.io/npm/dm/ngx-if-platform.svg)](https://www.npmjs.com/ngx-if-platform)

[![Snyk](https://snyk.io/advisor/npm-package/ngx-if-platform/badge.svg)](https://snyk.io/advisor/npm-package/ngx-if-platform)

[![codecov](https://codecov.io/gh/Celtian/ngx-if-platform/branch/master/graph/badge.svg?token=1IRUKIKM0D)](https://codecov.io/gh/celtian/ngx-if-platform/)

[![stars](https://badgen.net/github/stars/celtian/ngx-if-platform)](https://github.com/celtian/ngx-if-platform/)

[![forks](https://badgen.net/github/forks/celtian/ngx-if-platform)](https://github.com/celtian/ngx-if-platform/)

[![HitCount](http://hits.dwyl.com/celtian/ngx-if-platform.svg)](http://hits.dwyl.com/celtian/ngx-if-platform)

> Angular directive for conditional display based on platform

> ✓ _Angular 18 compatible_

Here's the [demo](http://celtian.github.io/ngx-if-platform/) or [stackblitz live preview](https://stackblitz.com/edit/ngx-if-platform) or [codesandbox live preview](https://codesandbox.io/s/ngx-if-platform-dgtck)

- Lightweight

- No dependencies!

- Directive way

## 🛠️ Install

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

```terminal

yarn add ngx-if-platform

```

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

```typescript

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

@Component({

  standalone: true,

  imports: [NgxIfPlatformModule /* , ... */],

  // ...

})

```

or

```typescript

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

  @NgModule({

   // ...

   imports: [

     // ...

     NgxIfPlatformModule

   ]

  })

```

## 🚀 Quick start

### Example code

```html

Is browser


Is server (disabled)

Is server

Not server

```

### Result

```code

  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](https://github.com/Celtian)

All contents are licensed under the [MIT license].

[mit license]: LICENSE