15.-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>