15. UI Components

Narik UI Components

* indicates implemented.

Component	Angular Material	Devextreme Angular	Ngx Bootstrap	Ng Bootstrap	PrimeNG	Nebular
Narik Input	*	*		*	*	*
Narik Auto Complete	*	*		*	*
Narik Select	*	*		*	*	*
Narik Radio Group	*	*		*	*	*
Narik Checkbox	*	*		*	*	*
Narik Checkbox List	*	*		*	*	*
Narik Data Table	*	*		*	*	*
Narik Date Picker	*	*		*	*	*
Narik Dialog	*	*		*	*	*
Narik Dynamic Form	*	*		*	*	*
Narik Toolbar	*	*		*	*	*
Narik TreeView	*
Narik DataTable Select	*	*
Narik Button	*	*		*	*	*
Narik BusyIndicator	*	*		*	*	*

UI Components

Narik Input

sample usage:

    <narik-input  
        [placeHolder]='"login.userName_placeHolder" | translate'
        [(ngModel)]="loginModel.userName"
        name="name"
        [label]="'login.userName' | translate"
        type='text'>
    </narik-input>

Narik Auto Complete

sample usage:

   <narik-autocomplete
        [options]="options"
        [name]="name"
        [disabled]="false"
        [required]="true"
        placeHolder="{{ placeHolder | translate }}"
        [minLenToShowAutoComplete]="2"
        [isLazyLoadData]="true"
        [dataInfo]="item.dataInfo"
        label="{{ label | translate }}"
        [(ngModel)]="entity.city">
    </narik-autocomplete>

Narik Select

sample usage:

    <narik-select
        [options]="options"
        [name]="name"
        [disabled]="false"
        [required]="true"
        placeHolder="{{ placeHolder | translate }}"
        [dataInfo]="dataInfo"
        label="{{ label | translate }}"
        [(ngModel)]="entity.cityId">
    </narik-select>

Narik Radio Group

sample usage:

    <narik-radio-group
        [options]="options"
        [name]="name"
        [disabled]="false"
        [required]="true"
        placeHolder="{{ placeHolder | translate }}"
        [dataInfo]="dataInfo"
        label="{{ label | translate }}"
        [(ngModel)]="entity.cityId">
    </narik-radio-group>

Narik Checkbox

sample usage:

    <narik-checkbox
        [name]="name"
        [disabled]="false"
        [options]="options"
        [(ngModel)]="entity.isActive"
        label="{{ label | translate }}">
    </narik-checkbox>

Narik Checkbox List

sample usage:

    <narik-checkbox-list
        [options]="options"
        [name]="name"
        [disabled]="false"
        [required]="true"
        placeHolder="{{ placeHolder | translate }}"
        [dataInfo]="dataInfo"
        label="{{ label | translate }}"
        [(ngModel)]="entity.selectedItems">
    </narik-checkbox-list>

Narik Data Table

sample usage:

    <narik-data-table [fields]="fields" [pagingInfo]="config?.pagingInfo" [dataSource]="dataSource"
        selectMode="Multiple"
        (rowDoubleClick)="editEntity($event)"
        (rowCommandClick)="rowCommandClick($event)"
        [rowCommands]="config?.rowCommands"
        [rowCommandType]="config?.rowCommandType"
        [(selectedItem)]="selectedEntity" [(selectedItems)]="selectedItems">
    </narik-data-table>

Narik Date Picker

sample usage:

     <narik-date-picker
        [options]="options"
        [disabled]="false"
        [name]="name"
        [required]="true"
        placeHolder="{{ placeHolder | translate }}"
        [(ngModel)]="entity.date"
        label="{{ label | translate }}">
    </narik-date-picker>

Narik Dynamic Form

sample usage:

    <narik-dynamic-form
        [layoutGap]="config?.options?.layoutGap || 10"
        [columnsCount]="config?.options?.columnsCount || 1"
        [groupFields]="config?.options?.groupFields"
        [activeTabGuard]="config?.options?.activeTabGuard != false"
        [activeAutoFocus]="config?.options?.activeAutoFocus != false"
        [defaultFocusField]="config?.options?.defaultFocusField"
        [model]="currentEntity"
        [fields]="fields">
    </narik-dynamic-form>

Narik Toolbar

sample usage:

    <narik-toolbar toolbarKey="detailToolBar">
    </narik-toolbar>

Narik DataTable Select

sample usage:

    <narik-data-table-select
        [options]="options"
        [name]="name"
        [disabled]="false"
        [required]="true"
        placeHolder="{{ placeHolder | translate }}"
        [dataInfo]="dataInfo"
        label="{{ label | translate }}"
        [fields]="fields"
        [isLazyLoadData]="true"
        [(ngModel)]="entity.productId">
    </narik-data-table-select>

Narik Button

sample usage:

    <narik-button
        [cssClass]="'item-full-width'"
        (nClick)="login()"
        [isBusy]='isBusy'
        label='{{"login.button" | translate}}'
        color="primary">
    </narik-button>

Narik BusyIndicator

sample usage:

    <narik-busy-indicator [isBusy]="isBusy">
    </narik-busy-indicator>