dynamic-angular-tables v1.0.44

DynamicTables

Dynamic Tables is a UI component library for Angular 2+ developers,
DynamicTables Components help in constructing attractive, consistent,
and functional web pages and web applications, It helps in creating
faster, beautiful, and responsive websites.

For any Help, Bug, Features needs to be implemented fell free to visit me on GitHub or on linkedin

Before use import '@angular/compiler' in main.ts

Import Every thing from 'dynamic-angular-tables'

Implemented Components

services

1. Api.Service

components

1. Data Table
2. Stepper
3. Tree View
4. Auto Complete

Api.Service

Angular Service provide a fast way to register your system lookups in app.component.ts
then you can use it any where to get fast implemented service.

Lookup Api Register

Use Static Method setBaseUrl to set your website base url
make sure it's not end with slash /
Then make enum.ts file will contains all lookApi alias
Then register your api by call static method createApi
this method accepts two parameters the first one api alias,
second is api route without slash / at the beginning

farther this service will be enhanced with many features
make sure you follow up my steps

Example

#ApiLookupsEnum.ts

export enum apiLookupsEnum {
	testApi1,
    testApi2
}


#App.component.ts

constructor(apiService:ApiService) {
	ApiService.setBaseUrl("www.siteBase.com:10"); //localhost:port or any format
	ApiService.createApi(apiLookupsEnum.testApi1, "ApiRoute/GetData");
    ApiService.createApi(apiLookupsEnum.testApi2, "ApiRoute/GetData")

}

Getting Api Service Instance

instead of using dependency injection of angular you can call getApi static method
in ApiService while make sure you get new instance of api service by api alias then
you can use it easly.

Example

 #TestComponent.component.ts

constructor() {
	// alias defined in previous example (ApiLookupsEnum.ts)   
	const instance = ApiService.getApi(apiLookupsEnum.testApi1); 
    instance.getList().subscribe(data => {
  		console.log("data retried");
	});

}

Data Table

To use data table import dyanmic tables module then use component tag dynamic-dataTable

Inputs

dataSource: any[] | ApiService;// By providing Api Serivce instance Data table Will Auto Call getList Method
headers: IHeader;  // IHeader Interface contains required information to render your data.
				   interface IHeader {
                  		name: string;   // display name;
                        prop: string;   // property name in row object
                        visiblity: visibility; // set column (header) visiblity
                  } // you will notice that there is many other fields defined in the interface
                  	// these fields is for future features
                        

Output

No Output

Tree View

To use data table import dyanmic tables module then use component tag dynamic-tree-view

Inputs

dataSource: any[] | ApiService;
// By providing Api Serivce instance Data table Will Auto Call getAutoComplete Method
// Make Sure Data follow up Ilookup Interface

allowSearch:boolean; // make tree view component render search box to search in nodes
allowSelect:boolean; // gives user ability to select node
allowMultiSelect:boolean; // gives use ability to select multiple nodes (make sure allowSelect is set to true)
                        

Output

onSelect: EventEmitter<INodeConfig[]> // INodeConfig Interface Gives you some information About Selected Node
					

Auto Complete

To use data table import dyanmic tables module then use component tag dynamic-auto-complete

Inputs

dataSource: any[] | ApiService;
// By providing Api Serivce instance Data table Will Auto Call getAutoComplete Method
// Make Sure Data follow up Ilookup Interface

model:ILookup | ILookup[] | number | number[] | string | string[]; // pre selected Values 
allowMultiSelect:boolean; // gives user ability to select multiple items
allowSelectAll:boolean;   // gives user allow select all items 
modelType: dataType; // configure how modelChange Event Emmitted Data Type
					 // Default: dataType.number, Ilookup.id ;
                        

Output

modelChange: EventEmitter<ILookup | ILookup[] | number | number[] | string | string[]> 
			 // event for setting selected values

Stepper

To use data table import dyanmic tables module then use both components 1. steps container dynamic-stepper 2. wizard step stepComponent

Inputs ( wizard Step )

stepTitle:string; // title will be displayed in container
desc: string; // step description
                        

Output ( wizard Step )

No Output

Inputs ( Container )

allowJumping: boolean; // allow jumping between steps, default (false).
currentStep: number;   // set current step, default step number (0)
onJumping: (stepNumber: number) => boolean; // call back method fire on user jumping 
											// returns true to jump, false to keep on current step
onMoveNext: (stepNumber: number) => boolean; // call back method fire on user moving next 
											 // returns true to move, false to keep on current step
onMovePrevious: (stepNumber: number) => boolean; // call back method fire on user moving previous 
												 // returns true to move, false to keep on current step
                        

Output ( Container )

No Output

Example

# dataStep.component.ts
<dynamic-stepper [allowJumping] = "false">
  <dynamic-step  [stepTitle]="'step 1'"> step1 Content or <comp-tag> </dynamic-step>
  <dynamic-step  [stepTitle]="'step 2'"> step1 Content or <comp-tag> </dynamic-step>
</dynamic-stepper>