16.-UI-Wrappers
Angular Material (narik-ui-material)
Devextreme Angular (narik-ui-devextreme)
Ng Bootstrap(narik-ui-ng-bootstrap)
PrimeNG(narik-ui-primeng)
Nebular(narik-ui-nebular)
Ngx Bootstrap (narik-ui-ngx-bootstrap)(Under Development)
How Use Angular Material
For creating your application with Angular Material you have three ways.
add with schematics
Create new cli project with ng new newapp
Run ng add narik --ui=material
Clone narik-material-starter
Or
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.
add with schematics
Create new cli project with ng new newapp
Run ng add narik --ui=devextreme
Clone narik-devextreme-starter
Or
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.
add with schematics
Create new cli project with ng new newapp
Run ng add narik --ui=ng-bootstrap
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.
add with schematics
Create new cli project with ng new newapp
Run ng add narik --ui=primeng
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.
add with schematics
Create new cli project with ng new newapp
Run ng add narik --ui=nebular
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
Last updated