A small and simple property grid in angular to view/edit POJOs, excellent if you have a "settings" object you want to give the user to edit (that's why I have created it). Play online.
Import
import {PropertyGridModule} from 'ngx-property-grid';
import {NgxTemplateModule} from 'ngx-template';
If you need animation,you should import BrowserAnimationsModule
in your app.module.ts
.
Getting Started
Html
<ngx-property-grid [width]="'300px'" [options]="editor"></ngx-property-grid>
<ngx-property-grid [width]="'300px'" [options]="editor">
<ng-template ngxTemplate="text" let-p>
<input type="text" [value]="p.value" (change)="p.value = $event.target.value">
</ng-template>
<ng-template ngxTemplate="color" let-p>
<input type="color" [value]="p.value" (change)="p.value = $event.target.value">
</ng-template>
</ngx-property-grid>
Object options
export class ExampleEditorOptions {
@meta({name: 'Font', description: 'The font editor to use', type: SimpleTextEditorComponent, group: 'Editor', hidden: false})
font = 'Source Code Pro';
@meta({name: 'Font size', group: 'Editor', type: 'number', valueConvert: parseInt})
fontSize = 14;
@meta({name: 'Font color', group: 'Editor', type: 'color'})
fontColor = '#51f41c';
@meta({name: 'jQuery', group: 'Plugins', type: 'checkbox'})
jQuery = true;
@meta({name: 'modernizr', description: 'Whether or not to include modernizr on the page', group: 'Plugins', type: 'checkbox'})
modernizr = false;
@meta({
name: 'Framework',
description: 'Whether to include any additional framework',
type: 'options',
options: ['None', {text: 'AngularJS', value: 'angular'}, {text: 'Backbone.js', value: 'backbone'}]
})
framework = 'None';
}
The metadata options declare
export interface PropertyItemMeta {
name: string; // The display name of the property in the grid
description?: string; // A description of the property, will be used as tooltip on an hint element (a span with text "[?]")
order?: number; // The display order.
group?: string; // The group this property belongs to
hidden?: boolean; // Whether this property should be hidden in the grid, default is false (can be omitted).
initState?: 'hidden' | 'visible'; // - hidden/visible. If hidden then subItems should init by hidden state. default is hidden
type?: 'color' | 'date' | 'checkbox' | 'text' | 'options' | string | Type<ControlValueAccessor | ICustomDynamicComponent<any>>;
// options: boolean number options label color,
// or an custom component should be implement ControlValueAccessor or ICustomDynamicComponent<any>
options?: any; // options for type
colSpan2?: boolean; // - true/false. If true then property input will span both columns and will have no name/label
// (useful for textarea custom type)
valueConvert?: (value: any) => any; // convert the value, eg. parseInt
valueChanged?: (newValue: any, oldValue: any) => void;
}
As seen from the example above the metadata object can be used (it's optional) in order to describe the object properties. Each proprty in the metadata object could have the following:
options
array property