ngx-repository
    TypeScript icon, indicating that this package has built-in type declarations

    0.7.0 • Public • Published

    Greenkeeper badge Build Status npm version

    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

    How it work

    Installation

    npm i --save ngx-repository

    Links

    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

    Install

    npm i ngx-repository

    DownloadsWeekly Downloads

    105

    Version

    0.7.0

    License

    MIT

    Unpacked Size

    1.6 MB

    Total Files

    105

    Last publish

    Collaborators

    • endykaufman