NARIK
Search…
15.-UI-Components
* indicates implemented.
Component
Angular Material
Devextreme Angular
Ngx Bootstrap
Ng Bootstrap
PrimeNG
Nebular
Narik Dialog
*
*
​
*
*
*
Narik TreeView
*
​
​
​
​
​
UI Components
Narik Input
sample usage:
1
<narik-input
2
[placeHolder]='"login.userName_placeHolder" | translate'
3
[(ngModel)]="loginModel.userName"
4
name="name"
5
[label]="'login.userName' | translate"
6
type='text'>
7
</narik-input>
Copied!
Narik Auto Complete
sample usage:
1
<narik-autocomplete
2
[options]="options"
3
[name]="name"
4
[disabled]="false"
5
[required]="true"
6
placeHolder="{{ placeHolder | translate }}"
7
[minLenToShowAutoComplete]="2"
8
[isLazyLoadData]="true"
9
[dataInfo]="item.dataInfo"
10
label="{{ label | translate }}"
11
[(ngModel)]="entity.city">
12
</narik-autocomplete>
Copied!
Narik Select
sample usage:
1
<narik-select
2
[options]="options"
3
[name]="name"
4
[disabled]="false"
5
[required]="true"
6
placeHolder="{{ placeHolder | translate }}"
7
[dataInfo]="dataInfo"
8
label="{{ label | translate }}"
9
[(ngModel)]="entity.cityId">
10
</narik-select>
Copied!
Narik Radio Group
sample usage:
1
<narik-radio-group
2
[options]="options"
3
[name]="name"
4
[disabled]="false"
5
[required]="true"
6
placeHolder="{{ placeHolder | translate }}"
7
[dataInfo]="dataInfo"
8
label="{{ label | translate }}"
9
[(ngModel)]="entity.cityId">
10
</narik-radio-group>
Copied!
Narik Checkbox
sample usage:
1
<narik-checkbox
2
[name]="name"
3
[disabled]="false"
4
[options]="options"
5
[(ngModel)]="entity.isActive"
6
label="{{ label | translate }}">
7
</narik-checkbox>
Copied!
Narik Checkbox List
sample usage:
1
<narik-checkbox-list
2
[options]="options"
3
[name]="name"
4
[disabled]="false"
5
[required]="true"
6
placeHolder="{{ placeHolder | translate }}"
7
[dataInfo]="dataInfo"
8
label="{{ label | translate }}"
9
[(ngModel)]="entity.selectedItems">
10
</narik-checkbox-list>
Copied!
Narik Data Table
sample usage:
1
<narik-data-table [fields]="fields" [pagingInfo]="config?.pagingInfo" [dataSource]="dataSource"
2
selectMode="Multiple"
3
(rowDoubleClick)="editEntity($event)"
4
(rowCommandClick)="rowCommandClick($event)"
5
[rowCommands]="config?.rowCommands"
6
[rowCommandType]="config?.rowCommandType"
7
[(selectedItem)]="selectedEntity" [(selectedItems)]="selectedItems">
8
</narik-data-table>
Copied!
Narik Date Picker
sample usage:
1
<narik-date-picker
2
[options]="options"
3
[disabled]="false"
4
[name]="name"
5
[required]="true"
6
placeHolder="{{ placeHolder | translate }}"
7
[(ngModel)]="entity.date"
8
label="{{ label | translate }}">
9
</narik-date-picker>
Copied!
Narik Dynamic Form
sample usage:
1
<narik-dynamic-form
2
[layoutGap]="config?.options?.layoutGap || 10"
3
[columnsCount]="config?.options?.columnsCount || 1"
4
[groupFields]="config?.options?.groupFields"
5
[activeTabGuard]="config?.options?.activeTabGuard != false"
6
[activeAutoFocus]="config?.options?.activeAutoFocus != false"
7
[defaultFocusField]="config?.options?.defaultFocusField"
8
[model]="currentEntity"
9
[fields]="fields">
10
</narik-dynamic-form>
Copied!
Narik Toolbar
sample usage:
1
<narik-toolbar toolbarKey="detailToolBar">
2
</narik-toolbar>
Copied!
Narik DataTable Select
sample usage:
1
<narik-data-table-select
2
[options]="options"
3
[name]="name"
4
[disabled]="false"
5
[required]="true"
6
placeHolder="{{ placeHolder | translate }}"
7
[dataInfo]="dataInfo"
8
label="{{ label | translate }}"
9
[fields]="fields"
10
[isLazyLoadData]="true"
11
[(ngModel)]="entity.productId">
12
</narik-data-table-select>
Copied!
Narik Button
sample usage:
1
<narik-button
2
[cssClass]="'item-full-width'"
3
(nClick)="login()"
4
[isBusy]='isBusy'
5
label='{{"login.button" | translate}}'
6
color="primary">
7
</narik-button>
Copied!
Narik BusyIndicator
sample usage:
1
<narik-busy-indicator [isBusy]="isBusy">
2
</narik-busy-indicator>
Copied!
Last modified 1yr ago