16.-UI-Wrappers

  1. Angular Material (narik-ui-material)

  2. Devextreme Angular (narik-ui-devextreme)

  3. Ng Bootstrap(narik-ui-ng-bootstrap)

  4. PrimeNG(narik-ui-primeng)

  5. Nebular(narik-ui-nebular)

  6. Ngx Bootstrap (narik-ui-ngx-bootstrap)(Under Development)

How Use Angular Material

For creating your application with Angular Material you have three ways.

  1. add with schematics

    1. Create new cli project with ng new newapp

    2. Run ng add narik --ui=material

  2. Add it manually. 1. Install Angular Material Dependency 2. Install narik-ui-material 3. Add Angular Material to angular.json 1. Add Angular Material styles. 2. Add "node_modules/narik-ui-material/styles/narik-ui-material.css" to styles. 4. Import Narik Ui Material modules. Narik Ui Material created separated modules for each component. You can import each module you want. If you want all modules you can import NarikUiMaterialModule that contains all modules of Narik Ui Material.

    Component

    Module

    Narik Input

    NarikMatInputModule

    Narik Auto Complete

    NarikMatAutoCompleteModule

    Narik Select

    NarikMatSelectModule

    Narik Radio Group

    NarikMatRadioGroupModule

    Narik Checkbox

    NarikMatCheckBoxModule

    Narik Checkbox List

    NarikMatCheckBoxListModule

    Narik Data Table

    NarikMatDataTableModule

    Narik Date Picker

    NarikMatDatePickerModule

    Narik Dialog

    NarikMatDialogModule

    Narik Dynamic Form

    NarikMatDynamicFormModule

    Narik Toolbar

    NarikMatToolbarModule

    Narik TreeView

    NarikMatTreeviewModule

    Narik DataTable Select

    NarikMatDataTableSelectModule

    Narik Busy Indicator

    NarikMatBusyIndicatorModule

    Narik Button

    NarikMatButtonModule

How Use Angular Devextreme

For creating your application with Angular Devextreme you have three ways.

  1. add with schematics

    1. Create new cli project with ng new newapp

    2. Run ng add narik --ui=devextreme

  2. Add it manually. 1. Install Angular Devextreme Dependency 2. Install narik-ui-devextreme 3. Add Angular Devextreme to angular.json 1. Add Angular Devextreme styles. 2. Add "node_modules/narik-ui-devextreme/styles/narik-ui-devextreme.css" to styles. 4. Import Narik Ui Devextreme modules. Narik Ui Devextreme created separated modules for each component. You can import each module you want. If you want all modules, you can import NarikUiDevextremeModule that contains all modules of Narik Ui Devextreme.

    Component

    Module

    Narik Input

    NarikDevInputModule

    Narik Auto Complete

    NarikDevAutoCompleteModule

    Narik Select

    NarikDevSelectModule

    Narik Radio Group

    NarikDevRadioGroupModule

    Narik Checkbox

    NarikDevCheckBoxModule

    Narik Checkbox List

    NarikDevCheckBoxListModule

    Narik Data Table

    NarikDevDataTableModule

    Narik Date Picker

    NarikDevDatePickerModule

    Narik Dialog

    NarikDevDialogModule

    Narik Dynamic Form

    NarikDevDynamicFormModule

    Narik Toolbar

    NarikDevToolbarModule

    Narik TreeView

    Narik DataTable Select

    NarikDevDataTableSelectModule

    Narik Busy Indicator

    NarikDevBusyIndicatorModule

    Narik Button

    NarikDevButtonModule

How Use Angular Ng-Bootstrap

For creating your application with Angular Ng-Bootstrap you have two ways.

  1. add with schematics

    1. Create new cli project with ng new newapp

    2. Run ng add narik --ui=ng-bootstrap

  2. Add it manually. 1. Install Ng-Bootstrap Dependency 2. Install narik-ui-ng-bootstrap 3. Add Angular Ng-Bootstrap to angular.json 1. Add "node_modules/narik-ui-ng-bootstrap/styles/narik-ui-ng-bootstrap.css" to styles. 4. Import Narik Ui Ng-Bootstrap modules. Narik Ui Ng-Bootstrap created separated modules for each component. You can import each module you want. If you want all modules, you can import NarikUiNgBootstrapModule that contains all modules of Narik Ui Ng-Bootstrap.

    Component

    Module

    Narik Input

    NarikNgbInputModule

    Narik Auto Complete

    NarikNgbAutoCompleteModule

    Narik Select

    NarikNgbSelectModule

    Narik Radio Group

    NarikNgbRadioGroupModule

    Narik Checkbox

    NarikNgbCheckBoxModule

    Narik Checkbox List

    NarikNgbCheckBoxListModule

    Narik Data Table

    NarikNgbDataTableModule

    Narik Date Picker

    NarikNgbDatePickerModule

    Narik Dialog

    NarikNgbDialogModule

    Narik Dynamic Form

    NarikNgbDynamicFormModule

    Narik Toolbar

    NarikNgbToolbarModule

    Narik TreeView

    Narik DataTable Select

    NarikNgbDataTableSelectModule

    Narik Busy Indicator

    NarikNgbBusyIndicatorModule

    Narik Button

    NarikNgbButtonModule

How Use Angular PrimeNg

For creating your application with Angular PrimeNg you have two ways.

  1. add with schematics

    1. Create new cli project with ng new newapp

    2. Run ng add narik --ui=primeng

  2. Add it manually. 1. Install primeng Dependency 2. Install narik-ui-primeng 3. Add Angular primeng to angular.json 1. Add "node_modules/primeng/resources/themes/nova-light/theme.css" to styles. 2. Add "node_modules/primeng/resources/primeng.min.css"" to styles. 3. Add "node_modules/primeicons/primeicons.css" to styles. 4. Add "node_modules/narik-ui-primeng/styles/narik-ui-primeng.css" to styles. 4. Import Narik Ui Primeng modules. Narik Ui Primeng created separated modules for each component. You can import each module you want. If you want all modules, you can import NarikUiPrimeModule that contains all modules of Narik Ui Primeng.

    Component

    Module

    Narik Input

    NarikPrimeInputModule

    Narik Auto Complete

    NarikPrimeAutoCompleteModule

    Narik Select

    NarikPrimeSelectModule

    Narik Radio Group

    NarikPrimeRadioGroupModule

    Narik Checkbox

    NarikPrimeCheckBoxModule

    Narik Checkbox List

    NarikPrimeCheckBoxListModule

    Narik Data Table

    NarikPrimeDataTableModule

    Narik Date Picker

    NarikPrimeDatePickerModule

    Narik Dialog

    NarikPrimeDialogModule

    Narik Dynamic Form

    NarikPrimeDynamicFormModule

    Narik Toolbar

    NarikPrimeToolbarModule

    Narik TreeView

    Narik DataTable Select

    NarikPrimeDataTableSelectModule

    Narik Busy Indicator

    NarikPrimeBusyIndicatorModule

    Narik Button

    NarikPrimeButtonModule

How Use Angular Nebular

For creating your application with Angular Nebular you have two ways.

  1. add with schematics

    1. Create new cli project with ng new newapp

    2. Run ng add narik --ui=nebular

  2. Add it manually. 1. Install nebular Dependency 2. Install narik-ui-nebular 3. Add Angular nebular to angular.json 1. Add "node_modules/narik-ui-nebular/styles/narik-ui-nebular.css" to styles. 4. Import Narik Ui Nebular modules. Narik Ui Nebular created separated modules for each component. You can import each module you want. If you want all modules, you can import NarikUiNebularModule that contains all modules of Narik Ui Nebular.

    Component

    Module

    Narik Input

    NarikNebularInputModule

    Narik Auto Complete

    NarikNebularAutoCompleteModule

    Narik Select

    NarikNebularSelectModule

    Narik Radio Group

    NarikNebularRadioGroupModule

    Narik Checkbox

    NarikNebularCheckBoxModule

    Narik Checkbox List

    NarikNebularCheckBoxListModule

    Narik Data Table

    NarikNebularDataTableModule

    Narik Date Picker

    NarikNebularDatePickerModule

    Narik Dialog

    NarikNebularDialogModule

    Narik Dynamic Form

    NarikNebularDynamicFormModule

    Narik Toolbar

    NarikNebularToolbarModule

    Narik TreeView

    Narik DataTable Select

    NarikNebularDataTableSelectModule

    Narik Busy Indicator

    NarikNebularBusyIndicatorModule

    Narik Button

    NarikNebularButtonModule