Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nigrosimone/ng-condition
An alternative to `*ngIf; else` directive for simplify conditions into HTML template for Angular application.
https://github.com/nigrosimone/ng-condition
angular angular2
Last synced: 3 months ago
JSON representation
An alternative to `*ngIf; else` directive for simplify conditions into HTML template for Angular application.
- Host: GitHub
- URL: https://github.com/nigrosimone/ng-condition
- Owner: nigrosimone
- License: mit
- Created: 2021-03-28T15:38:46.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-01-06T19:52:04.000Z (10 months ago)
- Last Synced: 2024-08-08T23:12:46.358Z (3 months ago)
- Topics: angular, angular2
- Language: TypeScript
- Homepage: http://npmjs.com/package/ng-condition
- Size: 3.23 MB
- Stars: 6
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ng-condition - An alternative directive to `*ngIf; else` that simplifies conditions in HTML templates. (Table of contents / Third Party Components)
- fucking-awesome-angular - ng-condition - An alternative directive to `*ngIf; else` that simplifies conditions in HTML templates. (Table of contents / Third Party Components)
- fucking-awesome-angular - ng-condition - An alternative directive to `*ngIf; else` that simplifies conditions in HTML templates. (Table of contents / Third Party Components)
README
# NgCondition [](https://travis-ci.com/nigrosimone/ng-condition) [](https://coveralls.io/github/nigrosimone/ng-condition?branch=master) [](https://www.npmjs.com/package/ng-condition)
An alternative to `*ngIf; else` directive for simplify conditions into HTML template for Angular application.
## Description
Sometime multiple `*ngIf; else` can make html template ugly and complicated to understand, eg.:
```html
Number is minor or equal 5
Number is minor or equal 10
Number is minor or equal 20
Number is major of 20
```
with `ng-condition` you have a simple if, else if, else block, and the same template become eg.:
```html
Number is minor or equal 5
Number is minor or equal 10
Number is minor or equal 20
Number is major of 20
```
See the [stackblitz demo](https://stackblitz.com/edit/demo-ng-condition?file=src%2Fapp%2Fapp.component.ts).
## Get Started
*Step 1*: install `ng-condition`
```bash
npm i ng-condition
```
*Step 2*: Import `NgConditionModule` into your app module, eg.:
```ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgConditionModule } from 'ng-condition';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
NgConditionModule,
],
providers: [],
bootstrap: [AppComponent],
],
})
export class AppModule { }
```
## Examples
Below there are some examples of use case.
### Example: Simple if, else
Example of simple if, else, eg.:
```html
number is even
number is odd
```
### Example: Nested condition
Nested condition, eg.:
```html
number is even
Number is minor or equal 5
Number is major of 5
number is odd
Number is minor or equal 10
Number is major of 10
```
## Support
This is an open-source project. Star this [repository](https://github.com/nigrosimone/ng-condition), if you like it, or even [donate](https://www.paypal.com/paypalme/snwp). Thank you so much!
## My other libraries
I have published some other Angular libraries, take a look:
- [NgSimpleState: Simple state management in Angular with only Services and RxJS](https://www.npmjs.com/package/ng-simple-state)
- [NgHttpCaching: Cache for HTTP requests in Angular application](https://www.npmjs.com/package/ng-http-caching)
- [NgGenericPipe: Generic pipe for Angular application for use a component method into component template.](https://www.npmjs.com/package/ng-generic-pipe)
- [NgLet: Structural directive for sharing data as local variable into html component template](https://www.npmjs.com/package/ng-let)
- [NgForTrackByProperty: Angular global trackBy property directive with strict type checking](https://www.npmjs.com/package/ng-for-track-by-property)