Skip to content

15. UI Components

ali badakhshan edited this page Jun 13, 2019 · 6 revisions

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>
You can’t perform that action at this time.