gn-ui-components v0.3.1

UI Components for Angular Projects

A collection of standalone components which are based on Angular framework.

Usage (how to import)

app.module.ts

import {
  InputTextComponent
} from 'gn-ui-components';

@NgModule({
    imports: [
        ...
        InputTextComponent
        ...
    ]
})
export class AppModule {}

button

@inputs

confirmation-dialog

MatDialog

date-picker

@inputs |parameters|type|desc |-|-|-| |hintTxt|string|__
|placeholder|string|__
|type|string|__
|disabled|boolean|__
|defaultValue|string|__
|required|boolean|__

@outputs |parameters|type|desc |-|-|-| |onChange|any|____

card-number

@inputs |parameters|type|desc |-|-|-| |label|string|__
|class|string|__
|placeholder|string|____

checkbox

@inputs |parameters|type|desc |-|-|-| |options|any[]|____

currency

@inputs |parameters|type|desc |-|-|-| |label|string|__
|class|string|__
|placeholder|string|__
|currencyText|string|__
|hasClear|boolean|____

email

@inputs |parameters|type|desc |-|-|-| |label|string|__
|class|string|__
|placeholder|string|__
|error|InputErrorModel|__
|hasClear|boolean|____

number

@inputs |parameters|type|desc |-|-|-| |label|string|__
|class|string|__
|placeholder|string|__ |hasClear|boolean|__

options

@inputs |parameters|type|desc |-|-|-| |label|string|__
|class|string|__
|selectedId|number|__ |data|OptionModel|__ |required|boolean|____

@outputs |parameters|type|desc |-|-|-| |onChange|any|____

password

@inputs |parameters|type|desc |-|-|-| |label|string|__
|class|string|__
|placeholder|string|__
|error|InputErrorModel|__
|hintTxt|string|__
|iconName|string|__
|iconPos|string|__
|required|boolean|__

radio

@inputs |parameters|type|desc |-|-|-| |options|any[]|____

tel

@inputs |parameters|type|desc |-|-|-| |control|FormControl|__
|label|string|__
|class|string|__
|placeholder|string|__
|error|InputErrorModel|__
|type|string - 'mobile' ,'phone'|__
|required|boolean|____

text

@inputs |parameters|type|desc |-|-|-| |control|FormControl|__
|label|string|__
|class|string|__
|placeholder|string|__
|error|InputErrorModel|__
|type|string - 'text' ,'number'|__
|required|boolean|__ |iconName|string|__
|iconPos|string|__
|hasClear|boolean|__
|hintTxt|string|__
|disabled|boolean|__
|uiType|string|__
|dir|string|__
|minLength|number|__
|min|number|__
|maxLength|number|__
|max|number|__

text-area

@inputs |parameters|type|desc |-|-|-| |label|string|__
|class|string|__
|placeholder|string|____

list

@inputs |parameters|type|desc |-|-|-| |data|ListModel[]|__
|iconName|string|__
|iconColor|string|__
|mode|string|__
|_|string|__

@outputs |parameters|type|desc |-|-|-| |itemActionClick|any|____

material-table

@inputs |parameters|type|desc |-|-|-| |rows|any[]|__
|columns|any[]|__
|currentPage|number|__
|pageSize|number|__
|totalCount|number|__
|id|string|__
|maxSize|number|____

@outputs |parameters|type|desc |-|-|-| |pageChange|any|__
|pageSizeChange|any|__
|edit|any|__
|delete|any|__
|action|any|__
|sortColumn|any|__

multi-select

@inputs |parameters|type|desc |-|-|-| |options|any[]|__
|name|string|__

notif

@inputs |parameters|type|desc |-|-|-| |message|string|__
|type|string|__

search-tool-bar

@inputs |parameters|type|desc |-|-|-| |toolParams|any|__
|searchTotalCount|string|__

@outputs |parameters|type|desc |-|-|-| |search|any|____