Angular Version

Shreyu - Angular version is bootstraped using Angular cli. Angular Cli is a command line tool that you use to develop and maintain Angular applications. It uses the top-notch libraries, including ng-bootstrap and others and covers most of bootstrap UI elements. The implementation is clean and well structured. The UI components including widgets are implemented as re-usable components. The simple routing setup would help you to add/change pages easily.

What's included

Extract the zip file you received after purchase and you would find the exact below files and folders:

  • shreyu/angular --
    • ├── src
      • ├── app
        • ├── account - Account module contains the implementation for login, signup, forget password etc
        • ├── core- The core module - mainly contains the common services (singleton ones)
        • ├── layouts - The layout module - handles the layout and other variations
        • ├── pages - The pages module - contains the implementation of all pages including dashboard, apps, secondary pages, ui, etc
        • ├── shared - Entry point component
        • ├── app.component.ts - The app level shared module - containing reusable components implementation
        • ├── app-routing.module.ts - Router implementation
      • ├── assets
        • ├── fonts - fonts files
        • ├── images- images files
        • ├── scss - all scss (sass) files
    • ├── index.html - The main HTML page that is served when someone visits your site
    • ├── environments - Contains build configuration options for particular target environments
    • ├── package.json
    • ├── README.md
Pre-requisites

Shreyu Angular version is created using Angular CLI.

  1. Nodejs

    Make sure to have the Node.js installed & running in your computer. If you already have installed nodejs on your computer, you can skip this step.

  2. Yarn

    Yarn is a package manager and dependency management. It allows easy management of all the third party dependency and plugins.

    Make sure to have the Yarn installed & running in your computer. If you already have installed yarn on your computer, you can skip this step.

  3. Git

    Make sure to have the Git installed & running in your computer. If you already have installed git on your computer, you can skip this step

  4. Angular Cli

    Make sure to have the Angular CLI installed & running in your computer. If you already have it installed on your computer, you can skip this step. You might want to run follwoing command to install it.

    npm install -g @angular/cli

Getting Started

Once you have all pre-requisites installed and running, you are ready to get start with the template. First, go to the root folder (the folder created when you extract the zip) where the package.json is available and run the following command:

yarn install

This will download all required dependencies defined in package.json file. Once it is finished running the command, it will generate a folder named "node_modules" where you'll be able to see downloaded packages.

Now you're good to run the project and view it in browser by running the command below:

ng serve

The template should be up and running and you can access it using url http://localhost:4200

You can also create a production ready build by running the command below:

ng build --aot --prod

This will create a folder named dist. You might want to take this folder and deploy on root of your web server.

Routing

Shreyu Angular is having routing setup based on Angular-Router. We have solid routing way already implemented in theme which would make your job easy when dealing with any routing related changes.

You can easily add, change or remove any route by simply making changes described below:

  1. Setup routing for new module

    Create new file your-module.routing.ts, declare path and config for your components inside new your module.

    Add the entry for same in main application routing i.e. src/app/app-routing.ts

  2. Add/Change/Delete menu entry

    To add, change or delete any menu entry, you can use src/app/layouts/shared/menu/menu.ts file. You can simply manipulate the entries in default items there. There are two required and 4 optional properties for each entry. All of them are explained below:

    • id (required) - Unique identifier for the menu item
    • label (required) - Display name for the menu item
    • link (required) - Path of the menu item
    • icon - Icon class names, the icon would be displayed in front of label
    • badge - Badge details. You can specify the color as varient and text as text. The badge would be displayed on right of the label.
    • isTitle - Indicates if the item is just a title and not actual navigation item
    • subItems - A list of child menu items. Note that, you can specify three level of nested children to any menu entries
    • subItem - parentId - Parent identifier - required for each child

    Here's the example to add single menu item (without child): {{ '{' }} id: 3, label: 'Dashboard2', link: '/dashboard2', icon: 'home' {{ '}' }}

    Here's the another example to add menu item with children: {{ '{' }} id: 3, label: 'Projects', icon: 'book', subItems: [ {{ '{' }} id: 4, label: 'List', link: '/apps/projects', parentId: 3 {{ '}' }}, {{ '{' }} id: 5, label: 'Details', link: '/apps/project-details', parentId: 3 {{ '}' }} ] }

Customization Layout and Sidebar

You can change or customize the overall layout or left side navigation easily. There are examples available for horizontal nav, dark theme, RTL, condensed side nav, fixed width (boxed), etc. You can modify the left side nav, topbar, etc.

How to change left side nav width?

In order to change the width of left side navigation bar, open a file src/assets/scss/_variables.scss and change the value of variable $leftbar-width. The default value is set to 240px.

How to change background or menu text color?

In order to change the background color, open a file src/assets/scss/scss/_variables.scss and change the value of variable $bg-leftbar-light the default light value is set to #ffffff, $bg-leftbar-dark the default dark value is set to #323742.

When you change the background color, you might want to change the color of menu accordingly. To change the color of menu item, change the variable $menu-item(Default is set to #4B4B5A). Similarly, change the value of variables $menu-item-hover and $menu-item-active.

You can change other styles by making modifications in src/assets/scss/custom/structure/_left-menu.scss.

2019 © Shreyu. All Rights Reserved. Crafted with by Coderthemes