angular-key-value-editor

Simple angular component to view & edit Objects ( { key:"key", value:"value" })

Installation

$ npm install angular-key-value-editor --save

consuming the library:

Once you have installed the library, you can import it in any Angular application.

from your Angular AppModule:

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

import { EditorModule } from 'angular-key-value-editor';


import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    EditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

then, you can use its components in your Angular application:

<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>

<obj-editor 
   [object] = "testObject"
   (getUsableArray) = "usableArrayRecieved($event)"  
   (getUsableJson)   = "usableJsonRecieved($event)"
   [metadata] ="objMetaData"
></obj-editor>

the app.component.ts may be as follow:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  usableArray =[]
  usableJson = {}
  
  usableArrayRecieved(val){
     console.log(val) 
     this.usableArray = val
    }
  
  usableJsonRecieved(val){
      console.log(val)
      this.usableJson = val
      }
  
  
  testObject = [
     {  key:"key1",            keyEditable: false, value:"value1", valueEditable: false , element:"input", inputType:"text", deletable: false  },
     {  key:"key Editable",    keyEditable: true , value:"value2", valueEditable: false , element:"input", inputType:"text", deletable: false  },
     {  key:"value Editable",  keyEditable: false, value:"value3", valueEditable: true  , element:"input", inputType:"text", deletable: true  },
     {  key:"number editable", keyEditable: false, value:"4"    , valueEditable: true , element:"input", inputType:"number", deletable: false  },
     {  key:" deletable ",     keyEditable: false, value:"value5", valueEditable: false , element:"input", inputType:"text", deletable: true  },
     {  key:"minimal ", value:"value6"  },
  ]
  objMetaData = {title:"testEditor", keysEditable: true, valuesEditable: true, propsDeletable:true, extendable:true}    
  
  
    
  title = 'app';
}

License

MIT © Ahmad Yahia