Object properties editor

Thes library is a project consisting of a component capable of receiving any object and displaying a form for the modification of its attributes.

Once all the necessary changes have been made, the updated object will be returned to the user.This component has several customization options, explained in later sections.

Install

Run npm install ngx-object-properties-editor to install the npm package containing this library into your project.

GitHub

This library is hosted in a public GitHub repository that you can access by following this link.

In this repository you can see how the library has been developed, as well as a project called "demo" that contains an example of use. In case you have any doubts about how the library works, this project shows the use of all the features provided.

Basic usage example

First, we should import the library into your application module:

import { NgModule } from '@angular/core';
import { NgxObjectPropertiesEditorModule } from '...';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';

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

The imported component can then be used anywhere in the application. We will create a view and add it:

<h2>Example:</h2>
<div id="main_container">
	<ngx-object-properties-editor [object]="test" [labels]="labels" [selects]="enums" [hidden]="hidden" theme={{theme}} title={{title}}>
	</ngx-object-properties-editor>
</div>

All the input parameters that we can see in the code above have been created previously in the controller. We can see them in the following example:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  constructor()) {}

  test: any;
  title = 'Example form';
  labels: Map<string,string> = new Map();
  hidden: string[] = [];
  enums: Map<string,any> = new Map();
  theme: string = "dark";

  ngOnInit(): void { 
	enum eyesEnum {"Blue", "Green", "Dark brown", "Light brown", "Black"}
	enum handEnum {"Right-handed", "Left-handed", "Ambidextrous"}

    this.test = {person: {name: "Raquel", surnames: {s1: "Ortega", s2: "Perez"}}, age: 22, eyes: this.EyesEnum['Dark brown'], hands: this.HandsEnum['Right-handed']}
    
    this.enums = new Map().set("eyes",eyesEnum).set("hands", handEnum)

    this.hidden = ["hands"]

    this.labels = new Map().set("name", "Name")
                          .set("s1", "First surname")
                          .set("s2","Second surname")
                          .set("age", "Age")
                          .set("eyes", "Eye color")
                          .set("hands", "Dominant hand")
    
  }

With this we will be able to import and run successfully this library.

Parameters

Here we have a table with all the parameters that we can add to the view component:

| Name | Description | Optional | |--------------------|:-------------------------------:|:--------:| | object | Parameter that receives an object from which the form will be printed.| No | | labels | Parameter that receives a map containing the name of the attribute and the title label that you want to be displayed in the form. | Yes | | selects | Parameter that receives a map containing the name of the attributes that are of the enumerated type and the enum declaration. This way they will be displayed on the screen using an input of type select or radio. | Yes | | hidden | Parameter that receives an array of strings containing the name of the attributes that the user does not want to be displayed on the form. | Yes | | theme | Parameter that receives a string containing one of the defined themes. This will change the design of the form | Yes | | title | Parameter that receives a string containig a title for the form. | Yes |

Theming

Provided Themes

Here we have the themes provided for the component. You can check it's working at the 'Demo' proyect.

| Name | Description | |--------------------|:-------------------------------:| | light | Simple looking theme. It uses very light colors and a spaced look. | | dark | Same theme as the previous one, but with gray and black colors. Very useful not to tire your eyes. | | muret | Classic theme which uses blue and green colors and Roboto's font. | | custom | Custom theme that has no CSS inside it. It is intended for the user to use the CSS variables seen in the following section.|

Theme parameters

If you are looking for further customization, this library offers a custom theme called custom. This can be passed by parameter like the ones seen in the previous section.

To use the custom theme, we have some theme parameters that you will be able to use in order to change the form appearance. Here we have a list with all the parameters:

| Name | Use | |--------------------|:----------------------------------------------:| | --background-color | Changes the background color of the component.| | --color | Changes the text color of the component. | | --font-family | Changes the font family of the component. | | --title-color | Changes the text color of the title. | | --input-container-margin | Changes the margins of the inputs. | | --input-container-margin-top | Changes the top margin of the inputs. This is useful to change the spacing between inputs. | | --label-font-size | Changes the font size of the input labels. | | --label-font-weight| Changes the font weight of the input labels. | | --label-color | Changes the text color of the input labels. | | --label-margin-bottom | Changes the bottom margin of the labels. This is useful to change the spacing between label and input. | | --input-text-number-border | Changes the border style of the text and number inputs. | | --input-text-number-width | Changes the width of the text and number inputs. | | --input-border-radius | Changes the border radius of the text and number inputs. | | --input-padding | Changes the padding of the text and number inputs. | | --input-font-size | Changes the font size of the text and number inputs. | | --input-background-color | Changes the background color of the text and number inputs. | | --input-text-color | Changes the text color of the text and number inputs. | | --input-text-box-shadow | Changes the box shadow of the text and number inputs. | | --input-radio-color | Changes the text color of the labels next to the radio buttons. | | --radio-margin-left | Changes the left margin of the radio buttons. This is useful to ident the list of radio buttons inside the form. | | --radio-margin-top | Changes the top margin of the radio buttons and labels. This is useful to change the spacing between radio buttons. | | --select-background-color | Changes the background color of the select. | | --select-box-shadow | Changes the box shadow style of the select. | | --select-border | Changes the border style of the select. | | --select-width | Changes the width of the select. | | --select-border-radius | Changes the border radius of the select. | | --select-padding | Changes the padding of the select. | | --select-text-color | Changes the text color of the options inside the select.|

The idea is to create a class inside your CSS that contains the customized parameters, as we can see in the following example:

.custom {
    --background-color: green;
	--color: #ffffff;
	--font-family: 'Roboto';
}