{"id":14220334,"url":"https://github.com/nigrosimone/ng-condition","last_synced_at":"2025-07-14T05:30:57.448Z","repository":{"id":85036982,"uuid":"352368167","full_name":"nigrosimone/ng-condition","owner":"nigrosimone","description":"An alternative to  `*ngIf; else` directive for simplify conditions into HTML template for Angular application.","archived":false,"fork":false,"pushed_at":"2024-01-06T19:52:04.000Z","size":3392,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-08-20T15:07:29.854Z","etag":null,"topics":["angular","angular2"],"latest_commit_sha":null,"homepage":"http://npmjs.com/package/ng-condition","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nigrosimone.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"open_collective":"simone-nigro"}},"created_at":"2021-03-28T15:38:46.000Z","updated_at":"2023-03-05T03:06:46.000Z","dependencies_parsed_at":"2024-01-02T11:01:53.230Z","dependency_job_id":null,"html_url":"https://github.com/nigrosimone/ng-condition","commit_stats":{"total_commits":39,"total_committers":1,"mean_commits":39.0,"dds":0.0,"last_synced_commit":"843c90618f6956c42e589f4a0e11e8343f7b2952"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-condition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-condition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-condition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-condition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nigrosimone","download_url":"https://codeload.github.com/nigrosimone/ng-condition/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225951733,"owners_count":17550426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2"],"created_at":"2024-08-19T15:01:40.183Z","updated_at":"2024-11-22T19:20:24.727Z","avatar_url":"https://github.com/nigrosimone.png","language":"TypeScript","funding_links":["https://opencollective.com/simone-nigro","https://www.paypal.com/paypalme/snwp"],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"# NgCondition [![Build Status](https://travis-ci.com/nigrosimone/ng-condition.svg?branch=master)](https://travis-ci.com/nigrosimone/ng-condition) [![Coverage Status](https://coveralls.io/repos/github/nigrosimone/ng-condition/badge.svg?branch=master)](https://coveralls.io/github/nigrosimone/ng-condition?branch=master) [![NPM version](https://img.shields.io/npm/v/ng-condition.svg)](https://www.npmjs.com/package/ng-condition)\n\nAn alternative to  `*ngIf; else` directive for simplify conditions into HTML template for Angular application.\n\n## Description\n\nSometime multiple `*ngIf; else` can make html template ugly and complicated to understand, eg.:\n\n```html\n\u003cdiv *ngIf=\"number \u003c= 5; else majorOf5\"\u003e\n    Number is minor or equal 5\n\u003c/div\u003e\n\u003cng-template #majorOf5\u003e\n    \u003cdiv *ngIf=\"number \u003c= 10; else majorOf10\"\u003e\n        Number is minor or equal 10\n    \u003c/div\u003e    \n    \u003cng-template #majorOf10\u003e\n        \u003cdiv *ngIf=\"number \u003c= 20; else majorOf20\"\u003e\n            Number is minor or equal 20\n        \u003c/div\u003e\n        \u003cng-template #majorOf20\u003e\n            Number is major of 20\n        \u003c/ng-template\u003e\n    \u003c/ng-template\u003e\n\u003c/ng-template\u003e \n```\n\nwith `ng-condition` you have a simple if, else if, else block, and the same template become eg.: \n\n```html\n\u003cng-condition\u003e\n    \u003cng-if [condition]=\"number \u003c= 5\"\u003e\n      Number is minor or equal 5\n    \u003c/ng-if\u003e\n    \u003cng-else-if [condition]=\"number \u003c= 10\"\u003e\n      Number is minor or equal 10\n    \u003c/ng-else-if\u003e\n    \u003cng-else-if [condition]=\"number \u003c= 20\"\u003e\n      Number is minor or equal 20\n    \u003c/ng-else-if\u003e\n    \u003cng-else\u003e\n      Number is major of 20\n    \u003c/ng-else\u003e\n\u003c/ng-condition\u003e\n```\n\nSee the [stackblitz demo](https://stackblitz.com/edit/demo-ng-condition?file=src%2Fapp%2Fapp.component.ts).\n\n## Get Started\n\n*Step 1*: install `ng-condition`\n\n```bash\nnpm i ng-condition\n```\n\n*Step 2*: Import `NgConditionModule` into your app module, eg.:\n\n```ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { AppComponent } from './app.component';\n\nimport { NgConditionModule } from 'ng-condition';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    NgConditionModule,\n  ],\n  providers: [],\n  bootstrap: [AppComponent],\n  ],\n})\nexport class AppModule { }\n```\n\n## Examples\n\nBelow there are some examples of use case.\n\n### Example: Simple if, else\n\nExample of simple if, else, eg.:\n\n```html\n\u003cng-condition\u003e\n    \u003cng-if [condition]=\"number % 2 == 0\"\u003e\n      number is even\n    \u003c/ng-if\u003e\n    \u003cng-else\u003e\n      number is odd\n    \u003c/ng-else\u003e\n\u003c/ng-condition\u003e\n```\n\n### Example: Nested condition\n\nNested condition, eg.:\n\n```html\n\u003cng-condition\u003e\n    \u003cng-if [condition]=\"number % 2 == 0\"\u003e\n      number is even\n      \u003cng-condition\u003e\n        \u003cng-if [condition]=\"number \u003c= 5\"\u003e\n          Number is minor or equal 5\n        \u003c/ng-if\u003e\n        \u003cng-else\u003e\n          Number is major of 5\n        \u003c/ng-else\u003e\n      \u003c/ng-condition\u003e\n    \u003c/ng-if\u003e\n\n    \u003cng-else\u003e\n      number is odd\n      \u003cng-condition\u003e\n        \u003cng-if [condition]=\"number \u003c= 10\"\u003e\n          Number is minor or equal 10\n        \u003c/ng-if\u003e\n        \u003cng-else\u003e\n          Number is major of 10\n        \u003c/ng-else\u003e\n      \u003c/ng-condition\u003e\n    \u003c/ng-else\u003e\n\u003c/ng-condition\u003e\n```\n\n## Support\n\nThis 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!\n\n## My other libraries\n\nI have published some other Angular libraries, take a look:\n\n - [NgSimpleState: Simple state management in Angular with only Services and RxJS](https://www.npmjs.com/package/ng-simple-state)\n - [NgHttpCaching: Cache for HTTP requests in Angular application](https://www.npmjs.com/package/ng-http-caching)\n - [NgGenericPipe: Generic pipe for Angular application for use a component method into component template.](https://www.npmjs.com/package/ng-generic-pipe)\n - [NgLet: Structural directive for sharing data as local variable into html component template](https://www.npmjs.com/package/ng-let)\n - [NgForTrackByProperty: Angular global trackBy property directive with strict type checking](https://www.npmjs.com/package/ng-for-track-by-property)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnigrosimone%2Fng-condition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnigrosimone%2Fng-condition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnigrosimone%2Fng-condition/lists"}