Jobie - Job Portal Angular Admin Dashboard

Jobie - Job Portal Angular Admin Dashboard

Jobie

Jobie - Job Portal Angular Admin Dashboard

This documentation is last updated on 10 September 2021.

Thank you for purchasing this Angular 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
      • application
      • companies
      • profile-detail
      • search-job
      • statistics
      • 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_3"
data-headerbg="color_1"
data-sidebar-style="full"
data-sibebarbg="color_3"
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_3"
data-headerbg="color_1"
data-sidebar-style="full"
data-sibebarbg="color_3"
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_3" data-headerbg="color_1" 
data-sidebar-style="full" data-sibebarbg="color_3" data-sidebar-position="fixed" data-header-position="fixed" data-container="wide"
direction="ltr" data-primary="color_1" cz-shortcut-listen="true">


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 => ["wide" , "boxed" , "wide-boxed"]
direction: direction		    	More Options => ["ltr" , "rtl"]

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

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

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

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

<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="full"
direction="ltr"
data-primary="color_1"
>

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

<body 
data-typography="poppins"
data-theme-version="light"
data-layout="horizontal"
data-nav-headerbg="color_15"
data-headerbg="color_1"
data-sidebar-style="modern"
data-sibebarbg="color_1"
data-sidebar-position="static"
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_3"
data-sidebar-style="full"
data-sibebarbg="color_1"
data-sidebar-position="static"
data-header-position="fixed"
data-container="full"
direction="ltr"
data-primary="color_1"
>



Features -

  • Admin Routing

  • Lightbox

  • Charts

  • Carousel

  • Shop Pages

  • Email Pages

  • Event Calender

  • Bootstrap Components

  • Material Components

  • Form Elements


Css Files -

These all file import in styles.css

  • style.css

    Main Style CSS file is globally used

  • deeppurple-amber.css

    Material Css

  • bootstrap.min.css

    Bootstrap Css

  • perfect-scrollbar.css

    Perfect Scrollbar Css

  • lightbox.css

    Lightbox Css

  • metismenujs.css

    Matismenu css

  • dashboard.css

    Custom Css for template


Do You Need Help To Customization

After Purchase A Template...

You Will Start Customizing According Your Requirement
BUT What If You Don't Know

SOLUTION IS HIRE DexignZone

Hire Same Team For Quality Customization

  • We Will Customize Template According To Your Requirement
  • We Will Upload On Server And Make Sure Your Website is Live

Version History - #back to top

10 September 2021

  • Add Nestable Plugin
  • Add new table example
  • Add new datepicker example
  • Add new timepicker example
  • Add new typeahead example

03 August 2021

  • New - Created & Upload Jobie