Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tomastrajan/ngx-model
Angular Model. Simple state management with minimalistic API, one way data flow, multiple model support and immutable data exposed as RxJS Observable.
https://github.com/tomastrajan/ngx-model
angular data-flow model ngx-model rxjs-observable rxjs5 state-management
Last synced: about 1 month ago
JSON representation
Angular Model. Simple state management with minimalistic API, one way data flow, multiple model support and immutable data exposed as RxJS Observable.
- Host: GitHub
- URL: https://github.com/tomastrajan/ngx-model
- Owner: tomastrajan
- License: mit
- Created: 2017-07-20T13:20:33.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-09-29T20:54:27.000Z (over 6 years ago)
- Last Synced: 2024-12-10T02:11:02.393Z (about 1 month ago)
- Topics: angular, data-flow, model, ngx-model, rxjs-observable, rxjs5, state-management
- Language: TypeScript
- Homepage: https://tomastrajan.github.io/angular-model-pattern-example
- Size: 133 KB
- Stars: 133
- Watchers: 12
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-state - ngx-model
README
# ⚠️ IMPORTANT
## THIS REPO / PACKAGE HAS BEEN DEPRECATED
Please 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.
# The Angular Model - ngx-model
by [@tomastrajan](https://twitter.com/tomastrajan)
[](https://www.npmjs.com/package/ngx-model) [](https://github.com/tomastrajan/ngx-model/blob/master/LICENSE) [](https://www.npmjs.com/package/ngx-model) [](https://travis-ci.org/tomastrajan/ngx-model) [](https://twitter.com/tomastrajan)
Simple state management with minimalistic API, one way data flow,
multiple model support and immutable data exposed as RxJS Observable.
## Documentation
* [StackBlitz Demo](https://stackblitz.com/github/tomastrajan/ngx-model-example)
* [Demo & Documentation](http://tomastrajan.github.io/angular-model-pattern-example/)
* [Blog Post](https://medium.com/@tomastrajan/model-pattern-for-angular-state-management-6cb4f0bfed87)
* [Changelog](https://github.com/tomastrajan/ngx-model/blob/master/CHANGELOG.md)
* [Schematics](https://www.npmjs.com/package/@angular-extensions/schematics) - generate `ngx-model` services using Angular CLI schematics!
## Getting started
1. Install `ngx-model`
```
npm install --save ngx-model
```
or
```
yarn add ngx-model
```
2. Import and use `NgxModelModule` in you `AppModule` (or `CoreModule`)
```ts
import { NgxModelModule } from 'ngx-model';
@NgModule({
imports: [
NgxModelModule
]
})
export class CoreModule {}
```
3. Import and use `Model` and `ModelFactory` in your own services.
```ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { ModelFactory, Model } from 'ngx-model';
@Injectable()
export class TodosService {
private model: Model;
todos$: Observable;
constructor(private modelFactory: ModelFactory) {
this.model = this.modelFactory.create([]); // create model and pass initial data
this.todos$ = this.model.data$; // expose model data as named public property
}
toggleTodo(id: string) {
// retrieve raw model data
const todos = this.model.get();
// mutate model data
todos.forEach(t => {
if (t.id === id) {
t.done = !t.done;
}
});
// set new model data (after mutation)
this.model.set(todos);
}
}
```
4. Use service in your component. Import and inject service into components constructor.
Subscribe to services data in template `todosService.todos$ | async`
or explicitly `this.todosService.todos$.subscribe(todos => { /* ... */ })`
```ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { TodosService, Todo } from './todos.service';
@Component({
selector: 'ngx-model-todos',
templateUrl: `
/* ... */
Todos ({{count}})
-
{{todo.name}}
`,
})
export class TodosComponent implements OnInit, OnDestroy {
private unsubscribe$: Subject = new Subject();
count: number;
constructor(public todosService: TodosService) {}
ngOnInit() {
// explicit subscription to todos to get count
this.todosService.todos
.pipe(
takeUntil(this.unsubscribe$) // declarative unsubscription
)
.subscribe(todos => this.count = todos.length);
}
ngOnDestroy(): void {
// for declarative unsubscription
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
onTodoClick(todo: Todo) {
this.todosService.toggleTodo(todo.id);
}
}
```
## Available Model Factories
Models are created using model factory as shown in above example `this.model = this.modelFactory.create([]);`.
Multiple model factories are provided out of the box to support different use cases:
* `create(initialData: T): Model` - create basic model which is immutable by default (`JSON` cloning)
* `createMutable(initialData: T): Model` - 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
* `createMutableWithSharedSubscription(initialData: T): Model` - 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)
* `createWithCustomClone(initialData: T, clone: (data: T) => 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)
## Relationship to Angular Model Pattern
This is a library version of [Angular Model Pattern](https://tomastrajan.github.io/angular-model-pattern-example).
All the original examples and documentation are still valid. The only difference is that
you can install `ngx-model` from npm instead of having to copy model pattern
implementation to your project manually.
Check out the [Blog Post](https://medium.com/@tomastrajan/model-pattern-for-angular-state-management-6cb4f0bfed87) and
[Advanced Usage Patterns](https://tomastrajan.github.io/angular-model-pattern-example#/advanced)
for more how-tos and examples.
## Getting started with Schematics
1. make sure you're using this in project generated with Angular CLI.
2. install dependency with `npm i -D @angular-extensions/schematics`
3. generate model services with `ng g @angular-extensions/schematics:model --name path/my-model`
4. or with `ng g @angular-extensions/schematics:model --name path/my-model-collection --items` form model of collection of items
5. add your own model service methods and tests
