Node Permanently Moved

    ng2-listview-crud
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.9 • Public • Published

    ng2-listview-crud

    This is a Angular JS 2/4 module that can be included in projects to automatically render a listview with built-in create, delete, update, read and search.

    Installation

    To install this library, run:

    $ npm install ng2-listview-crud --save

    Usage

    Declare this component in the declaration

    ```typescript
        import { NgModule } from '@angular/core';
        import {Ng2ListViewCRUD} from "ng2-listview-crud";
    
    
    
        @NgModule({
          imports: [
          ],
          declarations: [ Ng2ListViewCRUD ],
          providers: [  ]
        })
        export class MainWidgetModule { }
    ```
    

    In the component [For simple array]

    ```typescript
    import { Component } from '@angular/core';
    import {Ng2ListViewCRUDProperty} from "ng2-listview-crud";
    
    @Component({
      templateUrl: './main.component.html',
      selector:'widget-main'
    })
    export class MainWidgetComponent {
    
      public listView:Ng2ListViewCRUDProperty= {
        add:true,//Adding possible
        remove:true,//Removing elements possible
        edit:true,//editing possible
        dataIsObject:false,
        path:[],
        label:"CRUD ListView",
        headingBackgroundColor:"#3752ff",
        headingFontColor:"#5f6468",
        icon:"fa fa-cogs",
        onDelete:function(value){
          console.log("Deleting Value: "+JSON.stringify(value));
          return true;
        },
        onUpdate:function(value,newValue){
          console.log("Editing Value: "+JSON.stringify(value)+" New Value:"+newValue);
          return true;
        },
        onSearch:function(value){
          console.log(value)
        },
        onAdd:function(value){
          console.log("Adding Value: "+JSON.stringify(value));
          return true;
        },
        onSelect:function(value){
          console.log(JSON.stringify(value));
        },
        onSearchChange:function(value){
          console.log(value)
        }  
      };
    
      //In this specific example the field name.first is displayed in the list
      public listItems:Array<Object>=
      [
      "Apple","Orange"
      ];
    }
    ```
    

    In the component [For nested structure]

    ```typescript
    import { Component } from '@angular/core';
    import {Ng2ListViewCRUDProperty} from "ng2-listview-crud";
    
    @Component({
      templateUrl: './main.component.html',
      selector:'widget-main'
    })
    export class MainWidgetComponent {
    
      public listView:Ng2ListViewCRUDProperty= {
        add:true,//Adding possible
        remove:true,//Removing elements possible
        edit:true,//editing possible  
        dataIsObject:true,
        path:["name","first"],
        label:"CRUD ListView",
        headingBackgroundColor:"#3752ff",
        headingFontColor:"#5f6468",
        icon:"fa fa-cogs",
        onDelete:function(value){
          console.log("Deleting Value: "+JSON.stringify(value));
          return true;
        },
        onUpdate:function(value,newValue){
          console.log("Editing Value: "+JSON.stringify(value)+" New Value:"+newValue);
          return true;
        },
        onSearch:function(value){
          console.log(value)
        },
        onAdd:function(value){
          console.log("Adding Value: "+JSON.stringify(value));
          return true;
        },
        onSelect:function(value){
          console.log(JSON.stringify(value));
        },
        onSearchChange:function(value){
          console.log(value)
        }  
      };
    
      //In this specific example the field name.first is displayed in the list
      public listItems:Array<Object>=
      [
      {name:{first:"Hello",last:"World"},count:2}
      {name:{first:"Hello2",last:"World"},count:2}
      ];
    }
    ```
    

    Place the ng2-listview-crud selector in your component's html:

       <ng2-listview-crud [properties]="listView" [data]="listItems"></ng2-listview-crud>

    Development

    To generate all *.js, *.d.ts and *.metadata.json files:

    $ npm run build

    To lint all *.ts files:

    $ npm run lint

    License

    MIT © Mohammed Rashid

    Install

    npm i ng2-listview-crud

    DownloadsWeekly Downloads

    8

    Version

    0.1.9

    License

    MIT

    Last publish

    Collaborators

    • mohdrashid