https://github.com/endykaufman/ngx-repository
Custom repository service for Angular9+, for easy work with the REST backend, with switch on fly from REST backend to the MOCK backend with save and use all CRUD operations
https://github.com/endykaufman/ngx-repository
angular angular9 class-transformer class-validator dynamic fake-http-client mock repository-service rest
Last synced: about 1 year ago
JSON representation
Custom repository service for Angular9+, for easy work with the REST backend, with switch on fly from REST backend to the MOCK backend with save and use all CRUD operations
- Host: GitHub
- URL: https://github.com/endykaufman/ngx-repository
- Owner: EndyKaufman
- License: mit
- Created: 2018-02-25T21:59:04.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-03-26T22:09:44.000Z (about 2 years ago)
- Last Synced: 2024-04-14T13:52:37.289Z (about 2 years ago)
- Topics: angular, angular9, class-transformer, class-validator, dynamic, fake-http-client, mock, repository-service, rest
- Language: TypeScript
- Homepage: https://endykaufman.github.io/ngx-repository
- Size: 4.87 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 38
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-repository
[](https://greenkeeper.io/)
[](https://travis-ci.org/EndyKaufman/ngx-repository)
[](https://badge.fury.io/js/ngx-repository)
Custom repository service for Angular9+, for easy work with the REST backend, with switch on fly from REST backend to the MOCK backend with save and use all CRUD operations
[](https://www.youtube.com/watch?v=lEFD8ey82ek)
## Installation
```bash
npm i --save ngx-repository
```
## Links
[Demo](https://endykaufman.github.io/ngx-repository) - Demo application with ngx-repository.
[Stackblitz](https://stackblitz.com/edit/ngx-repository) - Simply sample of usage on https://stackblitz.com
## Usage
app.module.ts
```js
import { NgxRepositoryModule } from 'ngx-repository';
import { UsersGridComponent } from './users-grid.component';
@NgModule({
imports: [
...
NgxRepositoryModule,
...
],
declarations: [
...
UsersGridComponent,
...
],
...
})
export class AppModule {}
```
user-model.ts
```js
import { IModel } from 'ngx-repository';
import { IsNotEmpty, IsOptional } from 'class-validator';
import { plainToClassFromExist } from 'class-transformer';
export class UserModel implements IModel {
@IsOptional()
id: number;
@IsNotEmpty()
username: string;
password: string;
constructor(data?: any) {
plainToClassFromExist(this, data);
}
}
```
users-grid.component.ts
```js
import { Component, OnInit } from '@angular/core';
import { DynamicRepository, Repository } from 'ngx-repository';
import { UserModel } from './user-model';
import { Observable } from 'rxjs';
@Component({
selector: 'users-grid',
template: `
Create
-
{{item.username}}
Edit
Delete
Save
Cancel
`
})
export class UsersGridComponent implements OnInit {
public editedUser: UserModel;
public repository: Repository;
public items$: Observable
private mockedItems = [
{
'username': 'user1',
'password': 'password1',
'id': 1,
}, {
'username': 'user2',
'password': 'password2',
'id': 2,
}, {
'username': 'user3',
'password': 'password3',
'id': 3,
}, {
'username': 'user4',
'password': 'password4',
'id': 4,
}
];
constructor(
private dynamicRepository: DynamicRepository
) {
this.repository = this.dynamicRepository.fork(UserModel);
}
ngOnInit() {
this.repository.useMock({
items: this.mockedItems,
paginationMeta: {
perPage: 2
}
});
/* For real backend
this.repository.useRest({
apiUrl: environment.apiUrl,
paginationMeta: {
perPage: 2
}
});*/
this.items$ = this.repository.items$;
}
startEdit(user: UserModel) {
this.editedUser = this.repository.clone(user);
}
cancel() {
this.editedUser = undefined;
}
save(user: UserModel) {
this.repository.save(user).subscribe();
this.editedUser = undefined;
}
create() {
this.repository.create(new UserModel({
username: 'new user'
})).subscribe();
}
delete(user: UserModel) {
this.repository.delete(user.id).subscribe();
}
}
```
app.component.ts
```html
...
...
```
## License
MIT