Xino Crypto Angular Premium Admin and Dashboard Template, With these template formats, it's very easy to create a presence and grab someone's attention around the web page Because the template is built using using Angular, CSS, Scss and with TypeScript. So please before you start working with the template take a quick look on the documentation so that you can easily built your website.

Support and Updates:

When you purchase Xino, you gain access to free future updates to ensure your template remains up-to-date. Plus, our support team is always ready to assist with any questions.

What Do You Get with the Xino:

Xino provides all necessary Angular Components files,CSS, Scss and TS Files, along with detailed Documentation to help you easily customize and implement the template.

Xino Compatibility with Popular Browsers:

Xino is fully compatible with major browsers, ensuring a seamless user experience across Chrome, Firefox, Safari, Edge, and Opera.

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 Xino 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

StarterKit is a foundational template or boilerplate that provides the basic structure and essential components needed to build a web application from scratch. It’s designed to save time by offering pre-configured setups, allowing developers to focus on building features rather than setting up the initial project structure.

• Folder Structure: Organized directories for components, pages, assets, styles, and utilities.
• Basic Pages: Such as a dashboard, login/authentication page, and error pages.
• Reusable Components:dashboards, pages, apps, uitilities, ui-elements, advanced-ui, tables, maps, charts, forms ready to be customized.
• Styling Setup: CSS, SCSS for quick UI development.

How to Run the Staterkit:

npm install
(or)
yarn install

Step 2:

ng serve
                                            

Once you serve your application by default port is set to 4200 :http://localhost:4200/

To change the Angular port manually, you can specify the port number when running the ng serve command. By default, the port is set to 4200, but you can specify a different port number by appending `--port` followed by the desired port number.

ng serve --port 1234

How to Convert SCSS to CSS:

npm run sass

Purpose of a starter kit

General angular component structure of the Xino template Shared Folder.

Root:shared/layouts/full-layout.html

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

    
<app-breadcrumb  title="Pages" active_item="Empty"></app-breadcrumb>
<!-- 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,provideAnimations(),
    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 { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { admin, dashboardRoutingModule } from '../../components/dashboards/dashboard.routes';
export const content: Routes = [
  { path: '', children: [
   ...dashboardRoutingModule.routes,
  ]}
  ];
@NgModule({
    imports: [RouterModule.forRoot(admin)],
    exports: [RouterModule]
})
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-routing.module.ts file

         
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    export const admin: Routes = [
     {path:'default',children:[ {
      path: 'default',
      loadComponent: () =>
        import('./default/default').then((m) => m.DefaultComponent),
    },]}
    ];
    @NgModule({
      imports: [RouterModule.forChild(admin)],
      exports: [RouterModule],
    })
    export class dashboardRoutingModule {
      static routes = admin;
    }
    @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
    })
    export class AppRoutingModule { }
        

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-routing.module.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