tj-ui

This repository is intended for use with npm

Command: npm install tj-ui@latest

in tsconfig.json, you'll have to add "node_modules/tj-ui" to "typeRoots"

your app.module.ts will need:

• import { UserInputComponent } from 'tj-ui/tj-input/tj-input.component';
• import { TJFormComponent } from 'tj-ui/tj-form/tj-form.component';
• import { MetaDataService } from 'tj-ui/tj-services/meta-data.service';
• import { LabelService } from 'tj-ui/tj-services/label.service';
• import { ListFinderService } from 'tj-ui/tj-services/list-finder.service';
• import { GlobalInstanceStorageService} from 'tj-ui/tj-services/global-instance-storage.service';
• import { TJTableComponent } from 'tj-ui/tj-table/tj-table.component';
• import { TjDivComponent } from 'tj-ui/tj-div/tj-div.component';
• import { Routes, RouterModule } from '@angular/router';

It is a way to quickly create display items with angular 4, in a dynamic and easy manner.

tj-ui/tj-services/meta-data.service.ts

The meta data service contains the structure of your display. Rules for its use are in comments on the service itself.

In app.component.html (or where ever calls tj-ui) use < tj-form [identifier]="'formId'" [formName]="'formName'" [elementObject]="metaData"> formId and formName are the same, but when making nested calls, formName is the parent form, and identifier is the element itself.

In app.component.ts (or the component that calls tj-ui)this.metaData = this.metaDataService.findObjectByName('formName'); the variable name 'metaData' can be anything so long as the html [elementObject]="metaData" is changed from "metaData" to that same thing as well.

Properties

class: "className",

• Adds the CSS styling (tj-ui/tj-css) class to that element.

styles: { "property":"propertyValue", "otherProperty":"otherPropertyValue" }

• adds this custom CSS styling specific to that element. (Use it on divs to help with your layout)
• property and value pairs must be in quotes, and use commas at the end. NOT SEMICOLONS, like real css.
• for further information, google the ngStyle directive from angular 4.

elementType: 'seeBelow'

Specifies which element you are going to use. options are:
• Containers: 'container/form', 'container/div', or 'container/table' Note that html5 does not support nested forms, and tj-ui does not support putting containers inside tables. It is recommended that styling Divs with margins/padding is best to manage the layout.
• Elements: 'label', 'text', 'number', 'date', 'button','empty','checkbox', or 'dropdown'

labelVisible: boolean

• labelVisible simply controls whether or not the label for an element should be displayed

isRequired: boolean

• can make a form element required for entry

isVisible: boolean

• makes an element invisible, (useful for testing)

disableIfTrue['element1', 'element2'], enableIfTrue['element3','element3']

Allows elements to interact with eachother, a checkbox can disable elements by their name (which is their ID in the DOM), and enable others by the same method.

How to use 'container/table'

Use elementType: 'container/table' to define the element as a table

colNum: integer defines the number of columns, and slots them in one after the other, making the necesary number of rows. Use something:{elementType: 'empty'} as a filler for empty cells.

columnStyles: [{col1},{col2}], rowStyles: [{style1}] works just like the styles: {} from before, except these styles can be applied individually for each column or row, the index of each array is used to determine which style goes where.