Setting Up The Local Environment & Workspace

This comprehensive guide provides step-by-step instructions on how to set up your development environment Angular tool. It covers everything from the necessary prerequisites to installing the tool, creating an initial workspace, and setting up a starter app. You'll also learn how to run the app locally to test and verify your setup. By following this guide, you can ensure that your development environment is properly configured for Angular, and you can get started with your project confidently and efficiently. Whether you're a beginner or an experienced developer, this guide is an essential resource for anyone looking to work with Angular.

Prerequisites

• Angular
• Angular Bootstrap
• Typescript

To install Angular on your local System, you need the following:

Node.js

Angular requires a current, active LTS (long term support) or maintenance LTS (long term support) version of Node.js.

Download latest version of node.js from nodejs.org.
Install Node.js using downloaded file.
To check your node version, run node -v in a terminal/console window (cmd)

Npm package Manager

The Angular CLI and Angular applications depend on npm packages for many features and functions.
To download and install npm packages, you need an npm package manager.
This guide uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed, run npm -v in a terminal/console window (cmd)

For better understanding Angular we suggest you once go through official documentation of Angular from Angular Documentation

How to Run the Nilova Angular Template:

npm install            // If you faced any issue running "npm install" Please make sure to use,
                        
npm install --force 	// This command will ignore if there was any dependency issue.
(or)
yarn install			// yarn can handle dependency issues better than npm.
                                            
                                            

Once the installation was successful then you can find node_modules folder where all the downloaded libraries are available.

ng serve

ng serve --port 1234

npm run sass

Purpose of a starter kit

Introduction to the Angular Template Starter Kit:

The Angular template starterkit is a resource that helps developers kickstart their Angular web development projects by providing a preconfigured and ready-to-use template. It aims to simplify the initial setup and provide a foundation for building Angular-based websites or applications.

Purpose of the Angular Template Starter Kit:

The purpose of the Angular template starter kit is to save developers time and effort by offering a set of prebuilt files and configurations commonly used in Angular projects. Instead of starting from scratch, developers can leverage the starter kit to quickly set up a project structure that adheres to best practices and industry standards.

Benefits of Using the Angular Template Starter Kit:

The starter kit eliminates the need to set up the basic project structure manually. It provides a well-organized file and folder structure, including commonly used directories for separating code, templates, assets, and configuration files. This allows developers to focus more on implementing business logic rather than spending time on initial setup.
Before using the Angular template starter kit, developers should have a basic understanding of Angular and web development concepts.

Starterkit Overview

You can use the Starterkit if you are creating a new project. It will be time-consuming to use the full admin version for a new project as Dashtic have more than 120+ Components.

We have provided all the pre-build layouts like Sidemenu, Header, footer and blank pages etc in the Starterkit.

Starterkit Folder Structure

General angular component structure of the Nilova template Shared Folder.

Root:shared/layouts/full-layout.html

General Angular file structure of the Nilova template .Root:src\app\components\pages\empty-page\empty-page.html

    

<!-- Start::row-1 -->
<div class="row">
    <div class="col-xl-12">
        <div class="card custom-card">
            <div class="card-body">
             <h6 class="mb-0">Empty Card</h6>
            </div>
        </div>
    </div>
</div>
<!-- End::row-1 -->
   

How to Add Menus to Sidebar

In your Angular project, you can easily add menus to the sidebar by modifying the MENUITEMS array in the nav.service.ts (src\app\shared\services\nav.service.ts) file. The sidebar will dynamically display the menus based on the contents of this array.

Steps:

1 .Open nav.service.ts File:

Open the nav.service.ts (src\app\shared\services\nav.service.ts) file in your Angular project. This file contains the MENUITEMS array that defines the menus to be displayed in the sidebar.

To add the parent Menu Items:

Inside the MENUITEMS array, you can add your menu items using the following format:

    
title: 'Your Menu Title',
selected: false,
icon: 'icon-name',
type: 'link', // or 'sub', 'mega-menu', 'external', 'empty'
path: '/path-to-route', // Specify the route path for link type
active: false,
badgeClass: 'badge-class', // (optional) Add a badge to the menu item
badgeValue: 'Badge Text', // (optional) Text to display in the badge
        

To add the children Menu Items:

Inside the MENUITEMS array, you can add your menu items using the following format:

    
    {
        title: 'Your Menu Title',
        selected: false,
        icon: 'icon-name',
        type: 'link', // or 'sub', 'mega-menu', 'external', 'empty'
        active: false,
        badgeClass: 'badge-class', // (optional) Add a badge to the menu item
        badgeValue: 'Badge Text', // (optional) Text to display in the badge
        children: [
         // (optional) Define child items for sub-menu or mega-menu type
         {
           path: '/child-path',
           title: 'Child Menu Title',
           type: 'link',
           selected: false,
         },
         // Add more child items if needed
       ],
     }
        

• title: The display name of the menu.
• selected: Set to true if this menu is currently selected.
• icon: The icon to display next to the menu.
• type: Specify the type of the menu item (link, sub, mega-menu, external, empty).
• path: Specify the route path for link type menu.
• Menusub: Set to true for sub-menu or mega-menu types.
• active: Set to true to mark this menu as active.
• badgeClass (optional): CSS class for the badge.
• badgeValue (optional): Text to display in the badge.
• children: Define an array of child menu items for sub-menu or mega-menu type.

3 . Save the Changes:

After adding your menu items, save the changes made to the nav.service.ts (src\app\shared\services\nav.service.ts) file.

4 . View Sidebar Changes:

he sidebar will now automatically display the added menu items based on the modifications you made in the MENUITEMS array.

Basic Route

Following are the fundamental building blocks to creating a route.

1. Import the AppRoutingModule into app.config.ts and add it to the imports array.

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { RouterOutlet, provideRouter } from '@angular/router';
import { App_Route } from './app.routes';
export const appConfig: ApplicationConfig = {
    providers: [provideRouter(App_Route),RouterOutlet,
    importProvidersFrom()
    ]
};

Import RouterModule and Routes into your routingmodule.

The Angular CLI performs this steps automatically. The CLI also set up a Routes array for your routes and configures the imports and exports array

            
import {  Routes } from '@angular/router';
import {  dashboardRoutingModule } from '../../components/dashboards/dashboard.routes';
export const content: Routes = [
  { path: '', children: [
   ...dashboardRoutingModule,
  ]}
  ];

export class SaredRoutingModule { }
                                        

Define your routes in your Routes array.

Each route in this array is a JavaScript object that contains two properties. The first property path, defines the URL path for the route. The second property component, defines the component Angular should use for the corresponding path.

Use that component name with path, name, and data attribute in routes array in app-routes.ts file

         
    import {  Routes } from '@angular/router';
    export const AppRoutingModule: Routes = [
     {path:'default',children:[ {
      path: 'default',
      loadComponent: () =>
        import('./default/default').then((m) => m.DefaultComponent),
    },]}
    ];


        

Add your routes to your application.

Now that you have defined your routes, you can add the component to your application. First, add links to the components. Assign the anchor tag that you want to add the route to the routerLink attribute. Set the value of the attribute to the component to show when a user clicks on each link. Next, update your component template to include<router-outlet>This element informs Angular to update the application view with the component for the selected route.

        
<nav>
<ul class="list-unstyled">
    <li><a [routerLink]="['/default']" routerLinkActive="active">First Component</a></li>
</ul>
</nav>
  
<router-outlet></router-outlet>

Introduction :

This documentation outlines the process of converting SCSS (Sassy CSS) files to standard CSS (Cascading Style Sheets) in a project's assets directory using the SASS package. SCSS is a preprocessor for CSS, and SASS is a popular choice for transforming SCSS into CSS efficiently. This guide provides step-by-step instructions on installing the SASS package, configuring it in your project, and converting SCSS files to CSS.

npm install sass

Firebase SetUp

Step-1: Now run below commands inside angular 19 to install firebase latest.

step-2: Now we need to add firebase configuration details(create database on firebase) and we need to add that details in (angular_project/src/environments/environment.ts)

                    
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { environment } from 'src/environments/environment';
 import { AngularFireModule } from '@angular/fire/compat';
 import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
 import { AngularFireAuthModule } from '@angular/fire/compat/auth';
 imports:[
 ...
 BrowserAnimationsModule, // required animations module
 AngularFireModule.initializeApp(environment.firebase),
 AngularFirestoreModule,
 AngularFireAuthModule
 ]
                                            

Process to remove firebase :

• To remove firebase from the project make sure that you have to remove the auth.service.ts file in src/app/shared/auth.
• In login.ts replace login function with

• ts

  login() {
      if (this.loginForm.controls['email'].value === "spruko@template.com" && this.loginForm.controls['password'].value === "spruko"){
              this.router.navigate(['/dashboard/sales']);
      }
  }
                                                                              

• or else you can use any other authentication as per your requirement. And make sure to remove canActivate: [AdminGuard] from app-routes.ts. Remove the firebase-related content in app.module.ts, environment.
• Note: make sure to remove all AuthService from the project which can be found in the switcher, header, authentication, ect..

Firebase installation process