16. UI Wrappers

Narik 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. Clone narik-material-starter
   Or
3. 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. Clone narik-devextreme-starter
   Or
3. 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