{"id":13511396,"url":"https://github.com/tomastrajan/ngx-model","last_synced_at":"2025-07-23T18:32:31.182Z","repository":{"id":65424538,"uuid":"97837852","full_name":"tomastrajan/ngx-model","owner":"tomastrajan","description":"Angular Model. Simple state management with minimalistic API, one way data flow, multiple model support and immutable data exposed as RxJS Observable.","archived":false,"fork":false,"pushed_at":"2018-09-29T20:54:27.000Z","size":136,"stargazers_count":134,"open_issues_count":0,"forks_count":11,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-06-09T13:42:38.942Z","etag":null,"topics":["angular","data-flow","model","ngx-model","rxjs-observable","rxjs5","state-management"],"latest_commit_sha":null,"homepage":"https://tomastrajan.github.io/angular-model-pattern-example","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/tomastrajan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-20T13:20:33.000Z","updated_at":"2025-03-23T06:02:26.000Z","dependencies_parsed_at":"2023-01-23T01:55:12.914Z","dependency_job_id":null,"html_url":"https://github.com/tomastrajan/ngx-model","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/tomastrajan/ngx-model","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomastrajan%2Fngx-model","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomastrajan%2Fngx-model/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomastrajan%2Fngx-model/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomastrajan%2Fngx-model/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomastrajan","download_url":"https://codeload.github.com/tomastrajan/ngx-model/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomastrajan%2Fngx-model/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266731940,"owners_count":23975931,"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","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","data-flow","model","ngx-model","rxjs-observable","rxjs5","state-management"],"created_at":"2024-08-01T03:00:49.105Z","updated_at":"2025-07-23T18:32:31.123Z","avatar_url":"https://github.com/tomastrajan.png","language":"TypeScript","funding_links":[],"categories":["angular"],"sub_categories":[],"readme":"# ⚠️ IMPORTANT\n## THIS REPO / PACKAGE HAS BEEN DEPRECATED\n\nPlease use new `@angular-extensions/model`[package](https://www.npmjs.com/package/@angular-extensions/model) / [repo](https://github.com/angular-extensions/model) which is a combination of both the model library and related schematics which renders this package uselsess. On the other hand, feel free to keep using `ngx-model` if it suits your needs, it will not be deleted, but there will be no further development. Please, have a look into [migration](https://github.com/angular-extensions/model#migration-from-ngx-model) section in the new documentation.\n\n# The Angular Model - ngx-model\nby [@tomastrajan](https://twitter.com/tomastrajan)\n\n[![npm](https://img.shields.io/npm/v/ngx-model.svg)](https://www.npmjs.com/package/ngx-model) [![npm](https://img.shields.io/npm/l/ngx-model.svg)](https://github.com/tomastrajan/ngx-model/blob/master/LICENSE) [![npm](https://img.shields.io/npm/dm/ngx-model.svg)](https://www.npmjs.com/package/ngx-model) [![Build Status](https://travis-ci.org/tomastrajan/ngx-model.svg?branch=master)](https://travis-ci.org/tomastrajan/ngx-model) [![Twitter Follow](https://img.shields.io/twitter/follow/tomastrajan.svg?style=social\u0026label=Follow)](https://twitter.com/tomastrajan)\n\nSimple state management with minimalistic API, one way data flow, \nmultiple model support and immutable data exposed as RxJS Observable.\n\n\n## Documentation\n                           \n* [StackBlitz Demo](https://stackblitz.com/github/tomastrajan/ngx-model-example) \n* [Demo \u0026 Documentation](http://tomastrajan.github.io/angular-model-pattern-example/) \n* [Blog Post](https://medium.com/@tomastrajan/model-pattern-for-angular-state-management-6cb4f0bfed87) \n* [Changelog](https://github.com/tomastrajan/ngx-model/blob/master/CHANGELOG.md)\n* [Schematics](https://www.npmjs.com/package/@angular-extensions/schematics) - generate `ngx-model` services using Angular CLI schematics!\n\n![ngx-model dataflow diagram](https://raw.githubusercontent.com/tomastrajan/angular-model-pattern-example/master/src/assets/model_graph.png \"ngx-model dataflow diagram\")\n\n## Getting started\n\n1. Install `ngx-model`\n    \n    ```\n    npm install --save ngx-model\n    ``` \n \n    or\n    \n    ```\n    yarn add ngx-model\n    ``` \n\n2. Import and use `NgxModelModule` in you `AppModule` (or `CoreModule`)\n\n    ```ts\n    import { NgxModelModule } from 'ngx-model';\n        \n    @NgModule({\n      imports: [\n        NgxModelModule\n      ]\n    })\n    export class CoreModule {}\n    \n    ``` \n\n3. Import and use `Model` and `ModelFactory` in your own services.\n\n    ```ts\n    import { Injectable } from '@angular/core';\n    import { Observable } from 'rxjs';\n    import { ModelFactory, Model } from 'ngx-model';\n        \n    @Injectable()\n    export class TodosService {\n            \n      private model: Model\u003cTodo[]\u003e;\n      \n      todos$: Observable\u003cTodo[]\u003e;\n            \n      constructor(private modelFactory: ModelFactory\u003cTodo[]\u003e) {\n        this.model = this.modelFactory.create([]); // create model and pass initial data\n        this.todos$ = this.model.data$; // expose model data as named public property\n      }\n        \n      toggleTodo(id: string) {\n        // retrieve raw model data\n        const todos = this.model.get();\n            \n        // mutate model data\n        todos.forEach(t =\u003e {\n          if (t.id === id) {\n            t.done = !t.done;\n          }\n        });\n            \n        // set new model data (after mutation)\n        this.model.set(todos);\n      }\n        \n    }\n    ```\n\n4. Use service in your component. Import and inject service into components constructor.\nSubscribe to services data in template `todosService.todos$ | async` \nor explicitly `this.todosService.todos$.subscribe(todos =\u003e { /* ... */ })`\n\n    ```ts\n    import { Component, OnInit, OnDestroy } from '@angular/core';\n    import { Subject } from 'rxjs';\n    \n    import { TodosService, Todo } from './todos.service';\n    \n    @Component({\n      selector: 'ngx-model-todos',\n      templateUrl: `\n        /* ... */\n        \u003ch1\u003eTodos ({{count}})\u003c/h1\u003e\n        \u003cul\u003e\n          \u003c!-- template subscription to todos using async pipe --\u003e\n          \u003cli *ngFor=\"let todo of todosService.todos$ | async\" (click)=\"onTodoClick(todo)\"\u003e\n            {{todo.name}}\n          \u003c/li\u003e\n        \u003c/ul\u003e\n      `,\n    })\n    export class TodosComponent implements OnInit, OnDestroy {\n    \n      private unsubscribe$: Subject\u003cvoid\u003e = new Subject\u003cvoid\u003e();\n      \n      count: number;\n     \n      constructor(public todosService: TodosService) {}\n    \n      ngOnInit() {\n        // explicit subscription to todos to get count\n        this.todosService.todos\n          .pipe(\n            takeUntil(this.unsubscribe$) // declarative unsubscription\n          )\n          .subscribe(todos =\u003e this.count = todos.length);\n      }\n      \n      ngOnDestroy(): void {\n        // for declarative unsubscription\n        this.unsubscribe$.next();\n        this.unsubscribe$.complete();\n      }\n    \n      onTodoClick(todo: Todo) {\n        this.todosService.toggleTodo(todo.id);\n      }\n    \n    }\n\n    ```\n    \n## Available Model Factories\n\nModels are created using model factory as shown in above example `this.model = this.modelFactory.create([]);`.\nMultiple model factories are provided out of the box to support different use cases:\n\n\n * `create(initialData: T): Model\u003cT\u003e` - create basic model which is immutable by default (`JSON` cloning)\n * `createMutable(initialData: T): Model\u003cT\u003e` - create model with no immutability guarantees (you have to make sure that model consumers don't mutate and corrupt model state) but much more performance because whole cloning step is skipped\n * `createMutableWithSharedSubscription(initialData: T): Model\u003cT\u003e` - gain even more performance by skipping both immutability and sharing subscription between all consumers (eg situation in which many components are subscribed to single model)\n * `createWithCustomClone(initialData: T, clone: (data: T) =\u003e T)` - create immutable model by passing your custom clone function (`JSON` cloning doesn't support properties containing function or regex so custom cloning functionality might be needed)\n\n\n## Relationship to Angular Model Pattern\n\nThis is a library version of [Angular Model Pattern](https://tomastrajan.github.io/angular-model-pattern-example).\nAll the original examples and documentation are still valid. The only difference is that\nyou can install `ngx-model` from npm instead of having to copy model pattern\nimplementation to your project manually.\n\nCheck out the [Blog Post](https://medium.com/@tomastrajan/model-pattern-for-angular-state-management-6cb4f0bfed87) and \n[Advanced Usage Patterns](https://tomastrajan.github.io/angular-model-pattern-example#/advanced) \nfor more how-tos and examples.\n\n\n## Getting started with Schematics\n\n1. make sure you're using this in project generated with Angular CLI.\n2. install dependency with `npm i -D @angular-extensions/schematics`\n3. generate model services with `ng g @angular-extensions/schematics:model --name path/my-model`\n4. or with `ng g @angular-extensions/schematics:model --name path/my-model-collection --items` form model of collection of items\n5. add your own model service methods and tests\n\n![Generating model using schematics](https://raw.githubusercontent.com/angular-extensions/schematics/master/assets/model-schematics.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomastrajan%2Fngx-model","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomastrajan%2Fngx-model","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomastrajan%2Fngx-model/lists"}