EndyKaufman
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
Installation
npm i --save ngx-repositoryLinks
Demo - Demo application with ngx-repository.
Stackblitz - Simply sample of usage on https://stackblitz.com
Usage
app.module.ts
import { NgxRepositoryModule } from 'ngx-repository';
import { UsersGridComponent } from './users-grid.component';
@NgModule({
imports: [
...
NgxRepositoryModule,
...
],
declarations: [
...
UsersGridComponent,
...
],
...
})
export class AppModule {}user-model.ts
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
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: `
<button (click)="create()"> Create </button>
<ul>
<li *ngFor="let item of items$ | async">
<span *ngIf="editedUser?.id!==item?.id">
{{item.username}}
<button (click)="startEdit(item)"> Edit </button>
<button (click)="delete(item) "> Delete </button>
</span>
<span *ngIf="editedUser?.id===item?.id">
<input [(ngModel)]="editedUser.username" />
<button (click)="save(editedUser)"> Save </button>
<button (click)="cancel()"> Cancel </button>
</span>
</li>
</ul>
`
})
export class UsersGridComponent implements OnInit {
public editedUser: UserModel;
public repository: Repository<UserModel>;
public items$: Observable<UserModel[]>
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>(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
...
<users-grid></users-grid>
...License
MIT