15.-UI-Components
* indicates implemented.
Component | Angular Material | Devextreme Angular | Ngx Bootstrap | Ng Bootstrap | PrimeNG | Nebular |
* | * | | * | * | * | |
* | * | | * | * | | |
* | * | | * | * | * | |
* | * | | * | * | * | |
* | * | | * | * | * | |
* | * | | * | * | * | |
* | * | | * | * | * | |
* | * | | * | * | * | |
Narik Dialog | * | * | | * | * | * |
* | * | | * | * | * | |
* | * | | * | * | * | |
Narik TreeView | * | | | | | |
* | * | | | | | |
* | * | | * | * | * | |
* | * | | * | * | * |
sample usage:
<narik-input
[placeHolder]='"login.userName_placeHolder" | translate'
[(ngModel)]="loginModel.userName"
name="name"
[label]="'login.userName' | translate"
type='text'>
</narik-input>
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>
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>
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>
sample usage:
<narik-checkbox
[name]="name"
[disabled]="false"
[options]="options"
[(ngModel)]="entity.isActive"
label="{{ label | translate }}">
</narik-checkbox>
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>
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>
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>
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>
sample usage:
<narik-toolbar toolbarKey="detailToolBar">
</narik-toolbar>
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>
sample usage:
<narik-button
[cssClass]="'item-full-width'"
(nClick)="login()"
[isBusy]='isBusy'
label='{{"login.button" | translate}}'
color="primary">
</narik-button>
sample usage:
<narik-busy-indicator [isBusy]="isBusy">
</narik-busy-indicator>
Last modified 1yr ago