Kripton - Crypto Angular Admin Dashboard

kripton

kripton - Crypto Laravel Bootstrap Admin Dashboard

This documentation is last updated on 20 September 2021.

Thank you for purchasing this HTML template.

If you like this template, Please support us by rating this template with 5 stars

Getting started -

Before you begin, make sure you have Node and an npm package manager. installed on your computer.

Download node nodejs.org.

Check your node version, run node -v

Angular Setup -

Open terminal and run npm install -g @angular/cli

Angular CLI Doc: https://cli.angular.io

Serve and build

Use terminal and navigate to project root.Then run npm install

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build for Production

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Folder Structure -

src
- app
  - admin
  - dashboard
    - index1
    - index2
    - index3
    - index4
  - coin-details
  - market-capital
  - my-wallets
  - portofolio
  - transactions
  - apps
    - calender
    - email
      - compose
      - inbox
      - read
    - post-details
    - profile
    - shop
      - checkout
      - ecom-customers
      - invoice
      - order
      - product-detail
      - product-grid
      - product-list
  - bootstrap
    - accordion
      - accordion-basic
      - accordion-config
      - accordion-header
      - accordion-preventchange
      - accordion-static
      - accordion-toggle
    - alert
      - alert-basic
      - alert-closeable
      - alert-config
      - alert-custom
      - alert-slefclosing
    - badge
    - button
    - button-group
    - cards
    - carousel
      - carousel-basic
      - carousel-config
      - carousel-navigation
      - carousel-pause
    - datepicker
      - datepicker-adapter
      - datepicker-basic
      - datepicker-config
      - datepicker-customday
      - datepicker-custommonth
      - datepicker-disabled
      - datepicker-footertemplate
      - datepicker-i18n
      - datepicker-keyboard
      - datepicker-multiple
      - datepicker-popup
      - datepicker-positiontarget
      - datepicker-range
      - datepicker-range-popup
    - dropdown
      - dropdown-basic
      - dropdown-config
      - dropdown-container
      - dropdown-form
      - dropdown-manual
      - dropdown-navbar
      - dropdown-split
    - grid
    - list-group
    - media-object
    - modal
      - basic-modal
      - modal-component
      - modal-config
      - modal-focus
      - modal-options
      - modal-stacked
    - nav
      - nav-basic
      - nav-config
      - nav-custom-style
      - nav-dynamic
      - nav-keep-content
      - nav-markup
      - nav-selection
      - nav-vertical
    - pagination
      - pagination-advanced
      - pagination-basic
      - pagination-config
      - pagination-customization
      - pagination-disabled
      - pagination-justify
      - pagination-size
    - popover
      - popover-autoclose
      - popover-basic
      - popover-config
      - popover-container
      - popover-customclass
      - popover-delay
      - popover-tplcontent
      - popover-tplwithcontext
      - popover-triggers
      - popover-visibility
    - progressbar
      - progressbar-basic
      - progressbar-config
      - progressbar-height
      - progressbar-labels
      - progressbar-showvalue
      - progressbar-striped
      - progressbar-texttypes
    - rating
      - rating-basic
      - rating-config
      - rating-decimal
      - rating-events
      - rating-form
      - rating-template
    - table
      - table-basic
      - table-complete
      - table-filtering
      - table-pagination
      - table-sortable
    - timepicker
      - timepicker-adapter
      - timepicker-basic
      - timepicker-config
      - timepicker-i18n
      - timepicker-meridian
      - timepicker-seconds
      - timepicker-spinners
      - timepicker-steps
      - timepicker-validation
    - toast
      - toast-closeable
      - toast-custom
      - toast-global
      - toast-inline
      - toast-prevent-autohide
    - tooltip
      - tooltip-autoclose
      - tooltip-basic
      - tooltip-config
      - tooltip-container
      - tooltip-customclass
      - tooltip-delay
      - tooltip-tplcontent
      - tooltip-tplwithcontext
      - tooltip-triggers
    - typeahead
      - typeahead-basic
      - typeahead-config
      - typeahead-focus
      - typeahead-format
      - typeahead-http
      - typeahead-prevent-manual-entry
      - typeahead-template
    - typography
  - charts
    - apex
      - area
        
        area-basic
        
        area-github-style
        
        area-irregular-timeseries
        
        area-missing-or-null-values
        
        area-negative
        
        area-spline
        
        area-stacked
      - bar
        
        bar-basic
        
        bar-custom-data-labels
        
        bar-grouped
        
        bar-images
        
        bar-negative-values
        
        bar-patterned
        
        bar-reversed
        
        bar-stacked
        
        bar-stacked100
      - bubble
        
        bubble3-d
        
        bubble-simple
      - candlestick
        
        candlestick-basic
        
        candlestick-category
        
        candlestick-combo
        
        candlestick-line
      - column
        
        column-basic
        
        column-data-labels
        
        column-distributed
        
        column-loaded-chart
        
        column-negative-values
        
        column-range
        
        column-rotated-labels
        
        column-stacked
        
        column-stacked100
      - heatmap
        
        heatmap-basic
        
        heatmap-color-range
        
        heatmap-multiple-colors
        
        heatmap-multiple-flipped
        
        heatmap-rounded
      - line
        
        basic-line-chart
        
        brush-chart
        
        dashed-line-chart
        
        gradient-line-chart
        
        line-chart-with-datalabels
        
        line-with-annotations
        
        missing-or-null-values
        
        stepline-chart
        
        syncing-charts
        
        zoomable-timeseries
      - mixed
        
        mixed-line-area
        
        mixed-line-column
        
        mixed-line-column-area
        
        mixed-multiple-y-axis
      - pie
        
        donut-with-pattern
        
        pie-donut
        
        pie-gradient-donut
        
        pie-monochrome
        
        pie-simple
        
        semi-donut
      - polar-area
        
        polar-area-basic
        
        polar-area-monochrome
      - radar
        
        radar-basic
        
        radar-multiple-series
      - radialbar
        
        radialbar-basic
        
        radialbar-custom-angle-circle
        
        radialbar-gradient
        
        radialbar-multiple
        
        radialbar-semi-circle-gauge
        
        radialbar-stroked-angular-gauge
      - scatter
        
        scatter-basic
        
        scatter-datetime
        
        scatter-images
      - sparklines
        
        sparklines-basic
      - timeline
        
        timeline-advanced
        
        timeline-basic
        
        timeline-distributed
        
        timeline-multiple-series
        
        timeline-multi-series
      - treemap
        
        treemap-basic
        
        treemap-color-range
        
        treemap-distributed
        
        treemap-multiple-series
    - chartjs
      - chartjs-bar
      - chartjs-bubble
      - chartjs-doughnut
      - chartjs-line
      - chartjs-pie
      - chartjs-radar
  - elements
    - dashboard
    - footer
    - graph
    - header
    - loading
    - nav-header
    - navigation
    - profile
    - widget
  - forms
    - elements
    - form-validate
  - material
    - dzmt-autocomplete
    - dzmt-badge
    - dzmt-bottom-sheet
    - dzmt-button
    - dzmt-button-toggle
    - dzmt-card
    - dzmt-checkbox
    - dzmt-chips
    - dzmt-datepicker
    - dzmt-dialog
    - dzmt-divider
    - dzmt-expansion
    - dzmt-form-field
    - dzmt-grid-list
    - dzmt-icon
    - dzmt-input
    - dzmt-list
    - dzmt-menu
    - dzmt-paginator
    - dzmt-progress-bar
    - dzmt-progress-spinner
    - dzmt-radio
    - dzmt-ripple
    - dzmt-select
    - dzmt-sidenav
    - dzmt-slider
    - dzmt-slide-toggle
    - dzmt-snack-bar
    - dzmt-sort
    - dzmt-stepper
    - dzmt-table
    - dzmt-tabs
    - dzmt-toolbar
    - dzmt-tooltip
    - dzmt-tree
  - pages
    - error400
    - error403
    - error404
    - error500
    - error503
    - forgot-password
    - lock-screen
    - login
    - register
  - plugins
    - light-gallery
    - nestable
  - widget

angular.json

Used for configuration of project specific settings. You can add external styles and scripts, change the output folder, add assets, add environment files and more.
node_modules

All external modules used are here. Do not mess with this folder, as it is auto-generated by using npm install.
package.json

Contains all dependencies used for production and development.
src

Contains all Angular Typescript code, assets and basically everything the end user will have access to.
tsconfig.json

TypeScript compiler configuration.

Theme Features -

src/index.html


<body 
data-typography="poppins" 
data-theme-version="light" 
data-layout="vertical" 
data-nav-headerbg="color_1" 
data-headerbg="color_1" 
data-sidebar-style="full" 
data-sibebarbg="color_1" 
data-sidebar-position="fixed" 
data-header-position="fixed" 
data-container="wide" 
direction="ltr" 
data-primary="color_1"
>

RTL

                
<html dir="rtl" class="rtl" lang="en">

<body 
data-typography="poppins" 
data-theme-version="light" 
data-layout="vertical" 
data-nav-headerbg="color_1" 
data-headerbg="color_1" 
data-sidebar-style="full" 
data-sibebarbg="color_1" 
data-sidebar-position="fixed" 
data-header-position="fixed" 
data-container="wide" 
direction="rtl" 
data-primary="color_1"
>

Color Theme -

So many color option available

color_1
color_2
color_3
color_4
color_5
color_6
color_7
color_8
color_9
color_10
color_11
color_12
color_13
color_14
color_15

<body 
data-typography="poppins" data-theme-version="light" data-layout="vertical" data-nav-headerbg="color_1" data-headerbg="color_1" data-sidebar-style="full" 
data-sibebarbg="color_1" data-sidebar-position="fixed" data-header-position="fixed" data-container="wide" direction="ltr" data-primary="color_1">


data-typography: "poppins",  		More Options => ["poppins" , "roboto" , "Open Sans" , "Helventivca" ]
data-theme-version: "light",       	More Options => ["light" , "dark"]
data-layout: "horizontal",   		More Options => ["horizontal" , "vertical"]
data-primary: "color_11",		More Options => ["color_1," , "color_2," ..... "color_15"]
data-headerBg: "color_1",		More Options => ["color_1," , "color_2," ..... "color_15"]
data-nav-headerbg: "color_1",		More Options => ["color_1," , "color_2," ..... "color_15"]
data-sibebarbg: "color_11",		More Options => ["color_1," , "color_2," ..... "color_15"]
data-sidebar-style: "compact",		More Options => ["full" , "mini" , "compact" , "modern" , "overlay" , "icon-hover"]
data-sidebar-position: "static",	More Options => ["static" , "fixed"]
data-header-position: "fixed",		More Options => ["static" , "fixed"]
data-container: "full",		        More Options => ["full" , "wide" , "wide-box"]
direction: direction		    	More Options => ["ltr" , "rtl"]


<body 
data-typography="poppins"
data-theme-version="light"
data-layout="vertical"
data-nav-headerbg="color_14"
data-headerbg="color_1"
data-sidebar-style="full"
data-sibebarbg="color_12"
data-sidebar-position="fixed"
data-header-position="fixed"
data-container="full"
direction="ltr"
data-primary="color_14"
>


<body
data-typography="poppins"
data-theme-version="light"
data-layout="vertical"
data-nav-headerbg="color_4"
data-headerbg="color_1"
data-sidebar-style="full"
data-sibebarbg="color_4"
data-sidebar-position="fixed"
data-header-position="fixed"
data-container="full"
direction="ltr"
data-primary="color_4"
>


<body
data-typography="poppins"
data-theme-version="dark"
data-layout="vertical"
data-nav-headerbg="color_7"
data-headerbg="color_8"
data-sidebar-style="full"
data-sibebarbg="color_8"
data-sidebar-position="fixed"
data-header-position="fixed"
data-container="full"
direction="ltr"
data-primary="color_7"
>


<body
data-typography="poppins"
data-theme-version="light"
data-layout="vertical"
data-nav-headerbg="color_15"
data-headerbg="color_15"
data-sidebar-style="full"
data-sibebarbg="color_1"
data-sidebar-position="fixed"
data-header-position="fixed"
data-container="full"
direction="ltr"
data-primary="color_15"
>


<body
data-typography="poppins"
data-theme-version="light"
data-layout="horizontal"
data-nav-headerbg="color_1"
data-headerbg="color_1"
data-sidebar-style="compact"
data-sibebarbg="color_11"
data-sidebar-position="static"
data-header-position="fixed"
data-container="full"
direction="ltr"
data-primary="color_11"
>