Generic-crud NPM

Generic-CRUD

A simple Angular based package to create run-time CRUD for any API, Object or Table.

Getting Started

Installation

npm

$ npm install generic-crud --save

Include module GenericCRUDModule. Add a dependency to your app, for instance:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { GenericCRUDModule } from 'Generic-CRUD';

import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';

@NgModule({
declarations: [
    AppComponent
],
imports: [
    BrowserModule,
    RouterModule.forRoot([]),
    GenericCRUDModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Examples:

First Step

Setup CRUD Config on src\assets\setup\Posts.json, Example file below:

{
    "tableName": "Posts",
    "title": "Posts",
    "listColumns": [
        {
            "columnName": "Title",
            "key": "title",
            "sort": true
        },
        {
            "columnName": "",
            "key": "body",
            "sort": true
        },
        {
            "columnName": "Edit",
            "key": "id",
            "sort": false,
            "onClick": true,
            "cellTemplate": "<a  class='btn text-info pull-right'>Edit</a>"
        },
        {
            "columnName": "Remove",
            "key": "id",
            "sort": false,
            "onClick": true,
            "cellTemplate": "<a class='btn text-danger pull-right'>Delete</a>"
        }
    ],
    "controls": [
        {
            "key": "id",
            "label": "",
            "value": "",
            "required": false,
            "type": "hidden",
            "order": 0,
            "isDisabled": false,
            "controlType": 1
        },
        {
            "key": "userId",
            "label": "",
            "value": "1",
            "required": false,
            "type": "hidden",
            "order": 0,
            "isDisabled": false,
            "controlType": 1
        },
        {
            "key": "title",
            "label": "Post Title",
            "value": "",
            "required": true,
            "type": "text",
            "order": 0,
            "isDisabled": false,
            "controlType": 1
        },
        {
            "key": "body",
            "label": "Body",
            "value": "",
            "required": true,
            "type": "text",
            "order": 1,
            "isDisabled": false,
            "controlType": 7
        }
    ]
}

Second Step

Set your route to access your CRUD

    <ul class="navbar-nav mr-auto">
      ...
      <li class="nav-item">
        <a class="nav-link" routerLink="/list/Posts">Posts</a>
      </li>
    </ul>

Built With

Angular - Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.
Lodash - A modern JavaScript utility library delivering modularity, performance & extras.