NARIK
Search
⌃K
Comment on page

16.-UI-Wrappers

  1. 1.
    ​Angular Material (narik-ui-material)
  2. 2.
    ​Devextreme Angular (narik-ui-devextreme)
  3. 3.
    ​Ng Bootstrap(narik-ui-ng-bootstrap)
  4. 4.
    ​PrimeNG(narik-ui-primeng)
  5. 5.
    ​Nebular(narik-ui-nebular)
  6. 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. 1.
    add with schematics
    1. 1.
      Create new cli project with ng new newapp
    2. 2.
      Run ng add narik --ui=material
  2. 2.
    Clone narik-material-starter
    Or
  3. 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. 1.
    add with schematics
    1. 1.
      Create new cli project with ng new newapp
    2. 2.
      Run ng add narik --ui=devextreme
  2. 2.
    Clone narik-devextreme-starter
    Or
  3. 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. 1.
    add with schematics
    1. 1.
      Create new cli project with ng new newapp
    2. 2.
      Run ng add narik --ui=ng-bootstrap
  2. 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. 1.
    add with schematics
    1. 1.
      Create new cli project with ng new newapp
    2. 2.
      Run ng add narik --ui=primeng
  2. 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. 1.
    add with schematics
    1. 1.
      Create new cli project with ng new newapp
    2. 2.
      Run ng add narik --ui=nebular
  2. 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
Previous
15.-UI-Components
Next
17.-Event-Aggregator
Last modified 2yr ago