W3CRM

W3CRM - Angular Admin Dashboard Template

This documentation is last updated on 07 September 2024

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
- assets
- app
  - _services
  - Components
    - bootstrap
      - accordion
      - alert
      - badge
      - button
      - button-group
      - cards
      - carousel
      - dropdown
      - grid
      - list-group
      - media-object
      - model
      - pagination
      - popover
      - progressbar
      - table
      - tabs
      - typography
    - 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
  - elements
    - admin-layout
    - breadcrumb
    - chart-config
    - chatbox
    - dropdown
    - footer
    - header
    - nav-header
    - pagination
    - sidebar
    - short-cods
    - widget
  - Pages
    - dashboard
    - employees
    - core-hr
    - finance
    - manage-client
    - performance
    - project
    - reports
    - svg-icon
    - task
    - blog-1
    - account-pages
      - account-activity
      - account-api-keys
      - account-billing
      - . . .
    - aikit
      - auto-writer
      - chatbot
      - fine-tune-models
      - . . .
    - apps
      - app-contacts
      - chat
      - app-contacts
      - customer-manager
        
        customer
        
        customer-profile
      - email
        
        compose
        
        inbox
        
        read
      - users-manager
        
        app-add-role
        
        app-edit-profile
        
        post-details
        
        . . .
      - calender
      - shop
        
        checkout
        
        ecom-customers
        
        invoice
        
        order
        
        product-detail
        
        product-grid
        
        product-list
    - authentication
      - forgot-password
      - lock-screen
      - login
      - register
    - profile-pages
      - profile-activity
      - profile-campaigns
      - profile-documents
      - . . .
    - CMS
      - blog
      - blog-add
      - blog-category
      - content
      - content-add
      - email-add
      - email-template
      - menus
    - error
      - empty
      - error400
      - error403
      - error404
      - error500
      - error503
    - forms
      - editor
      - elements
      - picker
      - form-validate
    - widget
      - wg-card
      - wg-chart
      - wg-list
  - Plugins
    - sweet alert
    - toastr
    - light-gallery
    - select2
    - charts
      - apex
        
        area
        
        line
        
        column chart
        
        bar
        
        mixed
        
        temeline
        
        candlestick
        
        pie/ donuts
        
        radar
        
        radialbar / circle
        
        polar
        
        bubble
        
        scatter
        
        heatmap
        
        sparklines
      - chart-js
        
        general charts
        
        animation charts
        
        area
        
        bar
        
        bubble
        
        line

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_4" 
data-headerbg="color_4" 
data-sidebar-style="full" 
data-sidebarbg="color_1" 
data-sidebar-position="fixed" 
data-header-position="fixed" 
data-container="wide" 
data-primary="color_1" 
data-secondary="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

<body 
data-typography="poppins" data-theme-version="light" data-layout="vertical" data-nav-headerbg="color_4" data-headerbg="color_4" data-sidebar-style="full" 
data-sidebarbg="color_1" data-sidebar-position="fixed" data-header-position="fixed" data-container="wide" data-primary="color_1" data-secondary="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"]