Velzon Angular

https://themesbrand.com/velzon/docs/angular/
Admin
Velzon Angular is a premium, fully responsive admin and dashboard template built with Angular 20 and...
Tokens:50,911
Snippets:221
Trust Score:9.6
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Git on Linux

Source: https://themesbrand.com/velzon/docs/angular/getting-started

Commands to update the package list and install Git on a Linux system.

```bash
sudo apt-get update
sudo apt-get install git
```

--------------------------------

### Translate JSON Example

Source: https://themesbrand.com/velzon/docs/angular/multi-language

An example of a translation JSON file for German, mapping English keys to German values.

```json
{
    "Mega Menu": "Mega-Menu"
}
```

--------------------------------

### Install Angular Bootstrap Rating

Source: https://themesbrand.com/velzon/docs/angular/ratings

Instructions for installing the Angular Bootstrap Rating package using npm.

```bash
npm install @ng-bootstrap/ng-bootstrap --save
```

--------------------------------

### Install Flatpickr in Angular

Source: https://themesbrand.com/velzon/docs/angular/flatpickr

Installs the Flatpickr library and its Angular wrapper for use in your project.

```bash
npm install flatpickr angularx-flatpickr --save
```

--------------------------------

### Install ng-apexcharts

Source: https://themesbrand.com/velzon/docs/angular/apexcharts

Instructions for installing the ng-apexcharts package using npm. This is the first step to use Apexcharts in an Angular project.

```bash
npm install ng-apexcharts
```

--------------------------------

### Install Angular CLI

Source: https://themesbrand.com/velzon/docs/angular/getting-started

Installs the latest version of the Angular CLI globally. This command is essential for scaffolding and managing Angular projects.

```bash
npm install --global @angular/cli@latest
```

```bash
npm uninstall --global @angular/cli
```

```bash
npm install --global @angular/cli@latest
```

--------------------------------

### API Integration Guide

Source: https://themesbrand.com/velzon/docs/angular/api-integration

This section details how to integrate external APIs with the Velzon Angular theme. It covers setup, data fetching, and display of API-driven content within the application.

```APIDOC
API Integration:
  Purpose: Connect and utilize external data sources within the Angular application.
  Setup:
    1. Identify the API endpoint and required authentication methods.
    2. Use Angular's HttpClient module to make requests.
    3. Handle responses and errors gracefully.
  Example (Fetching Data):
    import { HttpClient } from '@angular/common/http';
    import { Observable } from 'rxjs';

    @Injectable({
      providedIn: 'root'
    })
    export class ApiService {
      private apiUrl = 'https://api.example.com/data';

      constructor(private http: HttpClient) {}

      getData(): Observable<any[]> {
        return this.http.get<any[]>(this.apiUrl);
      }
    }
  Considerations:
    - Error handling for network issues or invalid responses.
    - Data transformation and mapping to application models.
    - Asynchronous operations and state management.
```

--------------------------------

### Install Project Dependencies

Source: https://themesbrand.com/velzon/docs/angular/getting-started

Commands to clear the npm cache and install project dependencies using legacy peer dependencies. This ensures all necessary packages are downloaded for the Angular project.

```bash
npm clear cache --force
npm install --legacy-peer-deps
```

--------------------------------

### Multiple File Upload Example

Source: https://themesbrand.com/velzon/docs/angular/filepond

A basic example demonstrating how to implement a multiple file upload component using Filepond in an Angular template.

```html
<dropzone class="dropzone_sec"></dropzone>
```

--------------------------------

### Install @angular/google-maps

Source: https://themesbrand.com/velzon/docs/angular/google-maps

Installs the @angular/google-maps package, which provides components and services for integrating Google Maps JavaScript Core API into Angular applications.

```bash
npm install @angular/google-maps --save
```

--------------------------------

### Basic Angular Rating Example

Source: https://themesbrand.com/velzon/docs/angular/ratings

A simple example of an Angular rating component with a basic configuration, allowing user interaction and setting a maximum number of stars.

```html
<ngb-rating [(rate)]="defaultSelect" [readonly]="readonly" class="stars" [max]=5></ngb-rating>
```

--------------------------------

### Install Swiper Slider Package

Source: https://themesbrand.com/velzon/docs/angular/swiper-slider

Installs the necessary packages for Swiper Slider integration, including jQuery and slick-carousel, along with the Angular wrapper.

```bash
npm install jquery --save
npm install slick-carousel --save
npm install ngx-slick-carousel --save
```

--------------------------------

### Install ngx-color-picker

Source: https://themesbrand.com/velzon/docs/angular/colorpicker

Installs the ngx-color-picker package using npm. This command adds the necessary files to your project's node_modules directory and updates your package.json.

```bash
npm install ngx-color-picker --save
```

--------------------------------

### Boxicons Usage Example

Source: https://themesbrand.com/velzon/docs/angular/icons

Provides an example of how to implement Boxicons in HTML using their specific class naming convention.

```HTML
<i class="bx bx-**"></i>
```

--------------------------------

### Install Angular CDK and Angular NG Stepper

Source: https://themesbrand.com/velzon/docs/angular/wizard

Commands to install the necessary packages for the wizard component, including Angular CDK and angular-ng-stepper.

```Bash
npm i @angular/cdk
npm i angular-ng-stepper
```

--------------------------------

### Install CKeditor in Angular

Source: https://themesbrand.com/velzon/docs/angular/ckeditor

Installs the necessary CKeditor packages for classic build and Angular integration using npm.

```Bash
npm install --save @ckeditor/ckeditor5-build-classic
npm install --save @ckeditor/ckeditor5-angular
```

--------------------------------

### Install Filepond in Angular

Source: https://themesbrand.com/velzon/docs/angular/filepond

Instructions for adding the ngx-dropzone-wrapper package to your Angular project using npm.

```bash
npm install ngx-dropzone-wrapper --save
```

--------------------------------

### Install ng-select Package

Source: https://themesbrand.com/velzon/docs/angular/choices

Instructions for installing the ng-select TypeScript package, which enhances standard select inputs with multi-select and autocomplete capabilities.

```bash
npm install @ng-select/ng-select --save
```

--------------------------------

### Install ng-bootstrap

Source: https://themesbrand.com/velzon/docs/angular/bootstrap-ui

Instructions for adding the ng-bootstrap package to your Angular project using the Angular CLI.

```TypeScript
ng add @ng-bootstrap/ng-bootstrap --save
```

--------------------------------

### Install Leaflet in Angular

Source: https://themesbrand.com/velzon/docs/angular/leaflet

Installs the Leaflet library and its Angular integration package using npm. Also installs type definitions for Leaflet.

```bash
npm install leaflet --save
npm install @asymmetrik/ngx-leaflet
npm install --save-dev @types/leaflet
```

--------------------------------

### Serve Angular Application

Source: https://themesbrand.com/velzon/docs/angular/getting-started

Starts the Angular development server, which builds the app and watches for file changes. The --open flag automatically opens the application in the default browser.

```bash
ng serve --open
```

--------------------------------

### Remix Icons SCSS Setup

Source: https://themesbrand.com/velzon/docs/angular/icons

Imports the SCSS file for Remix Icons, which are open-source neutral-style system symbols. This setup is based on SCSS for easy integration.

```SCSS
<!-- remix icon scss -->
@import "custom/plugins/icons/remixicon";
```

--------------------------------

### Flatpickr DateTime Example

Source: https://themesbrand.com/velzon/docs/angular/flatpickr

Shows how to configure Flatpickr to allow selection of both date and time in an Angular application.

```html
<input class="form-control flatpickr-input" type="text" mwlFlatpickr [altInput]="true" [enableTime]="true" [convertModelValue]="true" [dateFormat]="'Y-m-d H:i'" >
```

--------------------------------

### Install ngx-slider-v2

Source: https://themesbrand.com/velzon/docs/angular/rangeslider

Installs the ngx-slider-v2 package using npm for use in Angular projects.

```bash
npm install --save ngx-slider-v2
```

--------------------------------

### Flatpickr Range Selection Example

Source: https://themesbrand.com/velzon/docs/angular/flatpickr

Shows how to configure Flatpickr for selecting a date range in an Angular application.

```html
<input class="form-control flatpickr-input" type="text" mwlFlatpickr [altInput]="true" [convertModelValue]="true" mode="range">
```

--------------------------------

### Line Awesome Usage Example

Source: https://themesbrand.com/velzon/docs/angular/icons

Demonstrates the usage of Line Awesome icons in HTML, utilizing their specific class structure.

```HTML
<i class="lab la-*-*"></i>
```

--------------------------------

### SweetAlert2 Installation and Removal

Source: https://themesbrand.com/velzon/docs/angular/sweetalert2

Instructions for installing and removing the SweetAlert2 package using npm. SweetAlert2 is a JavaScript library that provides a beautiful, responsive, and customizable alternative to native JavaScript alert boxes.

```JavaScript
import Swal from 'sweetalert2';
```

```bash
npm install sweetalert2 --save
```

```bash
npm uninstall sweetalert2
```

--------------------------------

### Material Design Icons Usage Example

Source: https://themesbrand.com/velzon/docs/angular/icons

Shows how to use Material Design Icons in HTML by applying the appropriate class prefixes and names.

```HTML
<i class="mdi mdi-*-*"></i>
```

--------------------------------

### REST API Service Setup

Source: https://themesbrand.com/velzon/docs/angular/api-integration

Illustrates setting up a REST API service in Angular using `HttpClient`. It shows how to import necessary modules and define the service class for making HTTP requests.

```TypeScript
import { GlobalComponent } from "../../global-component";
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Authorization': `Bearer ${localStorage.getItem('token')}` })
};
              
export class restApiService {
    ...
}

```

--------------------------------

### Install Shepherd.js in Angular

Source: https://themesbrand.com/velzon/docs/angular/shepherdjs-tour

This snippet shows how to add the angular-shepherd package to your Angular project using npm. This is the first step to enable user tour functionality.

```bash
npm install angular-shepherd --save
```

--------------------------------

### AJAX Request Example with SweetAlert2

Source: https://themesbrand.com/velzon/docs/angular/sweetalert2

Provides an example of integrating SweetAlert2 with an AJAX request. It uses an input field for email, shows a loading indicator, and handles success or rejection of the request, displaying appropriate feedback to the user.

```javascript
Swal.fire({
    title: 'Submit email to run ajax request',
    input: 'email',
    showCancelButton: true,
    confirmButtonText: 'Submit',
    showLoaderOnConfirm: true,
    customClass: {
        confirmButton: 'btn btn-primary',
        cancelButton: 'btn btn-danger ms-2 px-4',
    },
    buttonsStyling: false,
    preConfirm: (email) => {
        // eslint-disable-next-line no-unused-vars
        return new Promise((resolve, reject) => {
            setTimeout(() => {
            if (email === 'taken@example.com') {
                Promise.reject(new Error('This email is already taken.'));
            } else {
                resolve();
            }
            }, 2000);
        });
    },

    allowOutsideClick: false,
}).then((email) => {
    Swal.fire({
        icon: 'success',
        title: 'Ajax request finished!',
        confirmButtonColor: '#4b93ff',
        customClass: {
            confirmButton: 'btn btn-success'
        },
        html: 'Submitted email: ' + email,
        buttonsStyling: false,
    });
});
```

--------------------------------

### Flatpickr Basic Date Example

Source: https://themesbrand.com/velzon/docs/angular/flatpickr

Demonstrates the basic usage of Flatpickr for selecting a single date in an Angular template.

```html
<input class="form-control flatpickr-input" type="text" mwlFlatpickr [altInput]="true" [convertModelValue]="true">
```

--------------------------------

### Feather Icons Usage Example

Source: https://themesbrand.com/velzon/docs/angular/icons

Shows an example of how to use Feather Icons within a component, likely in a framework like React or Vue, by passing the icon name as a prop.

```JavaScript
<FeatherIcon icon="**"/>
```

--------------------------------

### Remix Icons Usage Example

Source: https://themesbrand.com/velzon/docs/angular/icons

Demonstrates how to use Remix Icons in HTML by applying specific class names to an `<i>` tag.

```HTML
<i class="ri-home-line"></i> or <i class="ri-home-fill"></i>
```

--------------------------------

### Fake Backend Setup

Source: https://themesbrand.com/velzon/docs/angular/fake-backend

Configures the application to use a fake backend for development. This involves setting the default authentication in `environment.ts` and uncommenting the FakeBackendInterceptor in `app.module.ts`.

```TypeScript
import { FakeBackendInterceptor } from './core/helpers/fake-backend';

if (environment.defaultauth === 'firebase') {
    initFirebaseBackend(environment.firebaseConfig);
} else {
    FakeBackendInterceptor;
}
```

--------------------------------

### Flatpickr Multiple Dates Example

Source: https://themesbrand.com/velzon/docs/angular/flatpickr

Demonstrates how to enable multiple date selections using Flatpickr in an Angular component.

```html
<input class="form-control flatpickr-input" type="text" id="example-week-input" mwlFlatpickr [altInput]="true" [convertModelValue]="true" mode="multiple">
```

--------------------------------

### Basic RangeSlider Example

Source: https://themesbrand.com/velzon/docs/angular/rangeslider

Demonstrates a basic implementation of the ngx-slider component in Angular, showing template usage and corresponding TypeScript configuration.

```html
<ngx-slider [(value)]="value" [options]="options"></ngx-slider>
```

```typescript
value: number = 100;
options: Options = {
    floor: 0,
    ceil: 200
};
```

--------------------------------

### Flatpickr Human-Friendly Dates Example

Source: https://themesbrand.com/velzon/docs/angular/flatpickr

Configures Flatpickr to display dates in a human-readable format while storing them in a standard format.

```html
<input class="form-control flatpickr-input" type="text" mwlFlatpickr [altInput]="true" [convertModelValue]="true" altFormat="F j, Y" dateFormat="Y-m-d">
```

--------------------------------

### Flatpickr Timepicker Example

Source: https://themesbrand.com/velzon/docs/angular/flatpickr

Configures Flatpickr to function solely as a time picker, without displaying a calendar.

```html
<input class="form-control flatpickr-input" type="text" mwlFlatpickr [noCalendar]="true" [enableTime]="true" [dateFormat]="'H:i'">
```

--------------------------------

### Flatpickr Inline Date Picker Example

Source: https://themesbrand.com/velzon/docs/angular/flatpickr

Demonstrates how to use Flatpickr as an always-visible inline date picker in an Angular template.

```html
<input class="form-control flatpickr-input" type="text" mwlFlatpickr [(ngModel)]="inlineDatePicker" [altInput]="true" [convertModelValue]="true" [inline]="true" >
```

--------------------------------

### Install Simplebar Angular

Source: https://themesbrand.com/velzon/docs/angular/simplebar

Installs the Simplebar Angular package using npm. Simplebar replaces default browser scrollbars with custom styled ones.

```bash
npm install simplebar-angular --save
```

--------------------------------

### Install ngx-echarts Package

Source: https://themesbrand.com/velzon/docs/angular/echarts

Instructions for adding the ngx-echarts package to your Angular project using npm.

```bash
npm install ngx-echarts
```

--------------------------------

### Line Awesome SCSS Setup

Source: https://themesbrand.com/velzon/docs/angular/icons

Imports the SCSS file for Line Awesome icons, which are line icons accessible with a single line of code. The icons are SCSS based.

```SCSS
<!-- line awesome icons scss -->
@import "custom/plugins/icons/line-awesome";
```

--------------------------------

### ngx-translate Configuration

Source: https://themesbrand.com/velzon/docs/angular/multi-language

Configuration for ngx-translate in app.module.ts, setting the default language and the HTTP loader for translation files.

```typescript
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';

export function createTranslateLoader(http: HttpClient): any {
  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}

@NgModule({
  imports: [
    TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
  ]
});

```

--------------------------------

### Material Design Icons SCSS Setup

Source: https://themesbrand.com/velzon/docs/angular/icons

Imports the SCSS file for Material Design Icons, a growing collection of icons available in various formats and sizes. These icons are SCSS based.

```SCSS
<!-- material design icons scss -->
@import "custom/plugins/icons/materialdesignicons";
```

--------------------------------

### Boxicons SCSS Setup

Source: https://themesbrand.com/velzon/docs/angular/icons

Imports the SCSS file for Boxicons, a collection of open-source icons designed on a 24px grid following material guidelines. The icons are SCSS based.

```SCSS
<!-- box icon scss -->
@import "custom/plugins/icons/boxicons";
```

--------------------------------

### Starter-kit vs Full Admin Comparison

Source: https://themesbrand.com/velzon/docs/angular/starter-kit

Compares the Velzon Angular 'Starter-kit' and 'Full Admin' template versions. The Starter-kit is a minimal version for custom builds, while the Full Admin is a comprehensive package for rapid development with many pre-built features.

```markdown
##### Starter-kit
**Starter kit** is a simplified and minimal version of an admin template. It provides the basic structure, essential components, and foundational code for building an application, but it's intentionally minimalistic. A starter kit is ideal for developers who want to build a custom admin panel from scratch and prefer to handpick and integrate additional components as needed. Starter kits are often lightweight and offer more flexibility, as developers can choose which features to include and which to implement separately.
You can use the Starter-kit if you are creating a new project. It will be time-consuming to use the full admin version for a new project as Velzon have more than 150 pages.
We have provided all the below pages in the Starter-kit with all the packages.
-> Layouts
-> Authentication pages
-> Error
-> Blank pages
-> Route
**In order to get the Starterkit files please contact us via support from the link below.**  
https://velzon.themesbrand.com
##### Full Admin
**Full admin** template, on the other hand, is a comprehensive package that includes a wide range of pre-designed UI components, layouts, styles, and functionality. It's a more complete solution that offers a cohesive and feature-rich starting point for building admin panels. Full admin templates are designed to speed up development by providing a ready-to-use interface with various modules, data tables, charts, authentication flows, and more. They are particularly useful when you want to rapidly create a functional admin dashboard without spending time on designing each component from scratch.
  * <= v3.5.1
  * >= v4.0.0
```

--------------------------------

### Install Chart.js in Angular

Source: https://themesbrand.com/velzon/docs/angular/chartjs

Instructions for adding the ng2-charts package to your Angular project using npm. This package facilitates the integration of Chart.js.

```bash
npm install ng2-charts

```

```bash
npm uninstall ng2-charts or you can remove package by removing specific package from package.json
```

--------------------------------

### Angular Pie Chart with Chart.js

Source: https://themesbrand.com/velzon/docs/angular/chartjs

Example of implementing a pie chart using Chart.js in Angular. Includes TypeScript for chart configuration and HTML for rendering.

```typescript
pieChart!: ChartType;
this.pieChart = pieChart;

const pieChart: ChartType = {
labels: [
'Desktops', 'Tablets'
],
datasets: [
{
    data: [300, 180],
    backgroundColor: ['#34c38f', '#ebeff2'],
    hoverBackgroundColor: ['#34c38f', '#ebeff2'],
    hoverBorderColor: '#fff',
}
],
options: {
maintainAspectRatio: false,
legend: {
    position: 'top',
}
}
};

```

--------------------------------

### Angular Timeline Chart Configuration

Source: https://themesbrand.com/velzon/docs/angular/apexcharts

Configures a timeline (range bar) chart in an Angular component. It defines series data with start and end dates, chart type, and x-axis as datetime. Requires ApexCharts and a helper function to get chart colors.

```typescript
private _basicTimelineChart(colors:any) {
  colors = this.getChartColorsArray(colors);
  this.basicTimelineChart = {
    series: [
      {
        data: [
          {
            x: "Code",
            y: [
              new Date("2019-03-02").getTime(),
              new Date("2019-03-04").getTime(),
            ],
          },
          {
            x: "Test",
            y: [
              new Date("2019-03-04").getTime(),
              new Date("2019-03-08").getTime(),
            ],
          },
          {
            x: "Validation",
            y: [
              new Date("2019-03-08").getTime(),
              new Date("2019-03-12").getTime(),
            ],
          },
          {
            x: "Deployment",
            y: [
              new Date("2019-03-12").getTime(),
              new Date("2019-03-18").getTime(),
            ],
          },
        ],
      },
    ],
    chart: {
      height: 350,
      type: "rangeBar",
      toolbar: {
        show: false,
      },
    },
    plotOptions: {
      bar: {
        horizontal: true,
      },
    },
    xaxis: {
      type: "datetime",
    },
    colors: colors,
  };
}
```

--------------------------------

### Angular Bar Chart with Chart.js

Source: https://themesbrand.com/velzon/docs/angular/chartjs

Example of implementing a bar chart using Chart.js in Angular. Includes TypeScript for chart configuration and HTML for rendering.

```typescript
lineBarChart!: ChartType;
this.lineBarChart = lineBarChart;

 const lineBarChart: ChartType = {
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July'
],
datasets: [
{
    label: 'Sales Analytics',
    backgroundColor: 'rgba(52, 195, 143, 0.8)',
    borderColor: 'rgba(52, 195, 143, 0.8)',
    borderWidth: 1,
    hoverBackgroundColor: 'rgba(52, 195, 143, 0.9)',
    hoverBorderColor: 'rgba(52, 195, 143, 0.9)',
    data: [65, 59, 81, 45, 56, 80, 50, 20],
    barPercentage: 0.4

},
],
options: {
maintainAspectRatio: false,
scales: {
    xAxes: [
        {
            gridLines: {
                color: 'rgba(166, 176, 207, 0.1)'
            },
        }
    ],
    yAxes: [
        {
            gridLines: {
                color: 'rgba(166, 176, 207, 0.1)'
            }
        }
    ]
}
}
};

```

```html
<canvas baseChart [datasets]="lineBarChart.datasets" [type]="'bar'" [options]="lineBarChart.options" height="300" [labels]="lineBarChart.labels"></canvas>

```

--------------------------------

### Node.js Backend Database Configuration

Source: https://themesbrand.com/velzon/docs/angular/api-integration

Provides instructions for configuring a Node.js backend to connect to a MongoDB database, either locally using MongoDB Compass or remotely via MongoDB Atlas. It details steps for connection string setup.

```Node.js
// In Node API's config.env file:
// DATABASE="mongodb+srv://<username>:<password>@<cluster-url>/<database-name>?retryWrites=true&w=majority"
// DATABASE_PASSWORD="<your-password>"

```

--------------------------------

### SCSS Variable Customization

Source: https://themesbrand.com/velzon/docs/angular/scss

Demonstrates how to quickly customize the Velzon theme's appearance by modifying SCSS variables. It provides examples for primary color, secondary color, font families, and vertical menu widths.

```SCSS
/* Quick customization of layout using scss.
You can make changes in the `src/assets/scss/config/default/_variables.scss` file. */

/* Variables | Description */
/* --- */
/* $primary:       $indigo;
$secondary:     $blue;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900; */
/* You can manage those colors to update color theme. */

/* $font-family-primary:                             'Poppins', sans-serif;
$font-family-secondary:                           'hkgrotesk', sans-serif; */
/* You can set the default font in these variables. */

/* $vertical-menu-width:                             250px;
$vertical-menu-width-md:                          180px;
$vertical-menu-width-sm:                          70px; */
/* Set the sidebar menu with in these variables. */
```

--------------------------------

### Angular Line Area Chart with Chart.js

Source: https://themesbrand.com/velzon/docs/angular/chartjs

Example of implementing a line area chart using Chart.js in Angular. Includes TypeScript for chart configuration and HTML for rendering.

```typescript
ineAreaChart!: ChartType;
this.ineAreaChart = ineAreaChart;

const lineAreaChart: ChartType = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October'],
datasets: [
{
    label: 'Sales Analytics',
    fill: true,
    lineTension: 0.5,
    backgroundColor: 'rgba(85, 110, 230, 0.2)',
    borderColor: '#556ee6',
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    pointBorderColor: '#556ee6',
    pointBackgroundColor: '#fff',
    pointBorderWidth: 1,
    pointHoverRadius: 5,
    pointHoverBackgroundColor: '#556ee6',
    pointHoverBorderColor: '#fff',
    pointHoverBorderWidth: 2,
    pointRadius: 1,
    pointHitRadius: 10,
    data: [65, 59, 80, 81, 56, 55, 40, 55, 30, 80]
},
{
    label: 'Monthly Earnings',
    fill: true,
    lineTension: 0.5,
    backgroundColor: 'rgba(235, 239, 242, 0.2)',
    borderColor: '#ebeff2',
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    pointBorderColor: '#ebeff2',
    pointBackgroundColor: '#fff',
    pointBorderWidth: 1,
    pointHoverRadius: 5,
    pointHoverBackgroundColor: '#ebeff2',
    pointHoverBorderColor: '#eef0f2',
    pointHoverBorderWidth: 2,
    pointRadius: 1,
    pointHitRadius: 10,
    data: [80, 23, 56, 65, 23, 35, 85, 25, 92, 36]
}
],
options: {
defaultFontColor: '#8791af',
responsive: true,
maintainAspectRatio: false,
scales: {
    xAxes: [
        {
            gridLines: {
                color: 'rgba(166, 176, 207, 0.1)',
            },
        },
    ],
    yAxes: [
        {
            ticks: {
                max: 100,
                min: 20,
                stepSize: 10,
            },
            gridLines: {
                color: 'rgba(166, 176, 207, 0.1)',
            },
        },
    ],

}

}
};

```

```html
<canvas baseChart height="300" [datasets]="lineAreaChart.datasets" [labels]="lineAreaChart.labels"
[options]="lineAreaChart.options" [type]="'line'">
</canvas>

```

--------------------------------

### Velzon Angular Auth Files

Source: https://themesbrand.com/velzon/docs/angular/folder-structure

Explains the authentication-related files in the Velzon Angular project, including login and registration pages, utility files for authentication handling, and Angular services for managing user authentication with Firebase or custom API endpoints.

```Angular
File | Path | Uses
---|---|---
| `app/account/login` | login view page code, if you need to customize login you can do from this.
| `app/account/register` | registration page view code.
| `app/authUtils.ts` | handling Firebase authentication and user management.
| `app/global.component.ts` | ALl API URL from here.
| `app/core/services/auth.service.ts` | Angular service for handling user authentication and registration, with options for using Firebase or custom API endpoints.
| `app/core/guards/authfake.service.ts` | Angular service for user authentication using a fake backend, including login and logout functionality with token-based storage.
| `app/core/guards/auth-guard.ts` | Angular route guard that checks for user authentication based on the chosen authentication method (Firebase or API)
```

--------------------------------

### Angular Veltzon Theme Configuration

Source: https://themesbrand.com/velzon/docs/angular/vertical

Demonstrates the initial state configuration for the Angular Veltzon theme, including layout, color modes, sidebar settings, and preloader options. It highlights the use of constants for theme properties.

```TypeScript
export const initialState: LayoutState = {
    LAYOUT: LAYOUT_TYPES.SEMIBOX,
    LAYOUT_MODE: LAYOUT_MODE.LIGHTMODE,
    LAYOUT_WIDTH: LAYOUT_WIDTH_TYPES.FLUID,
    LAYOUT_POSITION: LAYOUT_POSITION_TYPES.FIXED,
    TOPBAR: LAYOUT_TOPBAR_COLOR_TYPES.LIGHT,
    SIDEBAR_COLOR: SIDEBAR_COLOR.LIGHT,
    SIDEBAR_SIZE: SIDEBAR_SIZE.LARGE,
    SIDEBAR_VIEW: SIDEBAR_VIEW.DEFAULT,
    SIDEBAR_IMAGE: SIDEBAR_IMAGE.NONE,
    SIDEBAR_VISIBILITY: SIDEBAR_VISIBILITY.SHOW,
    DATA_PRELOADER: PERLOADER_TYPES.DISABLE
}
```

--------------------------------

### Velzon Angular Folder Structure

Source: https://themesbrand.com/velzon/docs/angular/folder-structure

Details the folder structure of the Velzon Angular project, explaining the purpose of each main directory such as 'app/account', 'app/core', 'app/extrapages', 'app/landing', 'app/layout', 'app/pages', and 'app/shared'.

```Angular
Folder | Path | Uses
---|---|---
| `app/account/` | All auth pages here.
| `app/core/` | All services manage from here.
| `app/extrapages/` | All Extrapages here.
| `app/landing/` | All landing related pages.
| `app/layout/` | All layout related Files
| `app/pages/` | All pages related this project.
| `app/shared/` | refer to a module commonly used component like (breadcrumb)
```

--------------------------------

### Velzon Developer Tools

Source: https://themesbrand.com/velzon/docs/angular/index

Information on the tools and technologies recommended for developing with the Velzon template, such as Angular CLI and Npm.

```APIDOC
For Developers:
  You can boost your development with Velzon on NG bootstrap, Angular CLI, Npm
```

--------------------------------

### Angular Theme Layout Configuration

Source: https://themesbrand.com/velzon/docs/angular/two-column

Demonstrates the initial state for layout configurations in an Angular application. It specifies various layout properties like mode, width, position, topbar, and sidebar settings.

```TypeScript
export const initialState: LayoutState = {
    LAYOUT: LAYOUT_TYPES.SEMIBOX,
    LAYOUT_MODE: LAYOUT_MODE.LIGHTMODE,
    LAYOUT_WIDTH: LAYOUT_WIDTH_TYPES.FLUID,
    LAYOUT_POSITION: LAYOUT_POSITION_TYPES.FIXED,
    TOPBAR: LAYOUT_TOPBAR_COLOR_TYPES.LIGHT,
    SIDEBAR_COLOR: SIDEBAR_COLOR.LIGHT,
    SIDEBAR_SIZE: SIDEBAR_SIZE.LARGE,
    SIDEBAR_VIEW: SIDEBAR_VIEW.DEFAULT,
    SIDEBAR_IMAGE: SIDEBAR_IMAGE.NONE,
    SIDEBAR_VISIBILITY: SIDEBAR_VISIBILITY.SHOW,
    DATA_PRELOADER: PERLOADER_TYPES.DISABLE
}
```

--------------------------------

### Basic Column Chart Initialization (Angular Component)

Source: https://themesbrand.com/velzon/docs/angular/apexcharts

Initializes the configuration for a basic column chart in an Angular component. This snippet shows the call to a helper function to set up the chart.

```typescript
basicChart: any;
this._basicChart('["--vz-danger", "--vz-primary", "--vz-success"]');

```

--------------------------------

### Create Basic Bar Chart with Angular and ApexCharts

Source: https://themesbrand.com/velzon/docs/angular/apexcharts

This snippet demonstrates how to create a basic bar chart using Angular and ApexCharts. It includes the component (typescript) code for defining the chart options and the HTML code for rendering the chart.

```typescript
private _basicBarChart(colors:any) {
  colors = this.getChartColorsArray(colors);
  const basicBarChart: ChartOptions = {
    chart: {
    height: 350,
    type: 'bar',
    toolbar: {
        show: false,
    }
    },
    plotOptions: {
    bar: {
        horizontal: true,
    }
    },
    dataLabels: {
    enabled: false
    },
    series: [{
    data: [380, 430, 450, 475, 550, 584, 780, 1100, 1220, 1365]
    }],
    colors: ['#33a186'],
    grid: {
    borderColor: '#f1f1f1',
    },
    xaxis: {
    categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'Germany'],
    }
  }
};

```

```html
<apx-chart [series]="basicBarChart.series" [colors]="basicBarChart.colors" [chart]="basicBarChart.chart"
[dataLabels]="basicBarChart.dataLabels" [plotOptions]="basicBarChart.plotOptions"
[xaxis]="basicBarChart.xaxis"></apx-chart>
```

--------------------------------

### Angular Rating Reset Functionality

Source: https://themesbrand.com/velzon/docs/angular/ratings

An example of an Angular rating component that includes a button to reset the rating back to zero.

```html
<ngb-rating [(rate)]="clearRate" [readonly]="readonly" class="stars align-middle star-rating" [max]=5></ngb-rating>
<button id="raterreset-button" class="btn btn-outline-primary btn-sm ms-2" (click)="clearRate = 0">Reset</button>
```

--------------------------------

### User Registration API Call

Source: https://themesbrand.com/velzon/docs/angular/api-integration

Shows how to call the user registration API from an Angular component. It demonstrates injecting the `AuthenticationService` and handling the response using RxJS observables.

```TypeScript
import { AuthenticationService } from '../../core/services/auth.service';

constructor(private authenticationService: AuthenticationService) { } 
                     
onSubmit() {
    this.submitted = true;

    //Register Api
    this.authenticationService.register(this.f['email'].value, this.f['name'].value, this.f['password'].value).pipe(first()).subscribe(
        (data: any) => {
        this.successmsg = true;
        if (this.successmsg) {
        this.router.navigate(['/auth/login']);
        }
    },
    (error: any) => {
        this.error = error ? error : '';
    });
}

```

--------------------------------

### Create Basic Column Chart with Angular and ApexCharts

Source: https://themesbrand.com/velzon/docs/angular/apexcharts

This snippet demonstrates how to create a basic column chart using Angular and ApexCharts. It includes the component (typescript) code for defining the chart options and the HTML code for rendering the chart.

```typescript
private _basicChart(colors:any) {
  colors = this.getChartColorsArray(colors);
  const basicColumnChart: ChartOptions = {
    chart: {
    height: 350,
    type: 'bar',
    toolbar: {
    show: false,
    }
    },
    plotOptions: {
    bar: {
    horizontal: false,
    columnWidth: '45%',
    },
    },
    dataLabels: {
    enabled: false
    },
    stroke: {
    show: true,
    width: 2,
    colors: ['transparent']
    },
    series: [{
    name: 'Net Profit',
    data: [46, 57, 59, 54, 62, 58, 64, 60, 66]
    }, {
    name: 'Revenue',
    data: [74, 83, 102, 97, 86, 106, 93, 114, 94]
    }, {
    name: 'Free Cash Flow',
    data: [37, 42, 38, 26, 47, 50, 54, 55, 43]
    }],
    colors: ["#fa6374", "#3980c0","#33a186"],
    xaxis: {
    categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
    },
    yaxis: {
    title: {
    text: '$ (thousands)'
    }
    },
    fill: {
    opacity: 1

    },
    tooltip: {
    y: {
    formatter: function (val) {
      return "$ " + val + " thousands"
    }
    }
  }
  }
};

```

```html
<apx-chart [series]="basicColumnChart.series" [chart]="basicColumnChart.chart" [colors]="basicColumnChart.colors" [dataLabels]="basicColumnChart.dataLabels"
[plotOptions]="basicColumnChart.plotOptions" [yaxis]="basicColumnChart.yaxis" [legend]="basicColumnChart.legend"
[fill]="basicColumnChart.fill" [stroke]="basicColumnChart.stroke" [tooltip]="basicColumnChart.tooltip"
[xaxis]="basicColumnChart.xaxis"></apx-chart>
```

```javascript
basicBarChart: any;
this._basicBarChart('["--vz-success"]');

```

--------------------------------

### Install ngx-mask

Source: https://themesbrand.com/velzon/docs/angular/input-mask

This snippet shows how to add the ngx-mask package to your Angular project using npm. This package is used for input masking.

```bash
npm install ngx-mask --save
```

--------------------------------

### Date Formatting with Cleave.js

Source: https://themesbrand.com/velzon/docs/angular/input-mask

Examples of using Cleave.js for date input formatting in Angular. It demonstrates masks for DD-MM-YYYY and MM/YY formats.

```html
<input type="text" class="form-control" mask="00/00/0000" placeholder="DD-MM-YYYY" id="cleave-date">
<input type="text" class="form-control" mask="00/00" placeholder="MM/YY" id="cleave-date-format">
```

--------------------------------

### Velzon Angular Layout Files

Source: https://themesbrand.com/velzon/docs/angular/folder-structure

Describes the layout-related files in the Velzon Angular project, including customization options for the right sidebar, footer, horizontal and vertical layouts, and the main layout master file.

```Angular
File | Path | Uses
---|---|---
| `app/layouts/rightsidebar/` | customizer related code.
| `app/layouts/footer/` | footer related code. you can modify as per your requirements.
| `app/layouts/horizontal/` | horizontal layout master.
| `app/layouts/two-column/` | two column layout master.
| `app/layouts/vertical/` | vertical hovered layout master.
| `app/layouts/` | default layout master file, you can set html attributes, and change common layouts changing this file.
| `app/layouts/sidebar/` | sidebar menus related code, you can add new menu here.
| `app/layouts/topbar/` | topbar related code here, you can easily customize topbar from here.
| `app/layouts/horizontal-topbar/` | horizontal-topbar related code here, you can easily customize horizontal-topbar from here.
| `app/layouts/two-column-sidebar/` | two-column-sidebar related code here, you can easily customize two-column-sidebar from here.
```

--------------------------------

### Add German Language Option

Source: https://themesbrand.com/velzon/docs/angular/multi-language

This snippet shows how to add a new language option for German in the application's language configuration.

```json
{ text: 'Deutsche', flag: 'assets/images/flags/germany.svg', lang: 'de' }
```

--------------------------------

### Angular Rating with Step and Custom Template

Source: https://themesbrand.com/velzon/docs/angular/ratings

Demonstrates an Angular rating component with half-star selection capabilities using a custom template and allows interaction to set the rating.

```html
<ng-template #t let-fill="fill">
<span class="star" [class.full]="fill === 100">
<span class="half" [style.width.%]="fill">★</span >☆</span>
</ng-template>
<ngb-rating class="d-inline-flex stars align-middle star-rating" [(rate)]="currentRate" [starTemplate]="t" [readonly]="true" [max]="5"> </ngb-rating>
<button class="btn btn-outline-light btn-sm ms-2" (click)="currentRate = 1.5">1.5</button>
<button class="btn btn-outline-light btn-sm ms-2" (click)="currentRate = 4.5">4.5</button>
```

--------------------------------

### Velzon Template Core Features

Source: https://themesbrand.com/velzon/docs/angular/index

Key features of the Velzon Angular Admin Dashboard Template, including the Angular and Bootstrap versions, architecture, multi-language support, and responsiveness.

```APIDOC
Key Features:
  * Build with Angular 19.x.x
  * Build with Bootstrap v5.3.6
  * Redux based architecture
  * Auth with Node API support
  * Multi-language support with i18n ( JSON object )
  * Pure Model Based Angular, no jQuery
  * Dark, Light with RTL Supported
  * Multiple Layouts
  * Fully Responsive Design
  * SASS Supported
  * Light-Weight Code
  * Easy to Customize with SCSS Variables
  * Lifetime Free Updates
  * Unlimited Template Possibilities
  * Calendar, Chat, Mailbox, eCommerce, Projects, Tasks, CRM, Crypto, Invoices & Support Tickets, NFT Marketplace, File Manager,To Do , Jobs & Api Key Apps
  * Authentication & Error Pages
  * One Page, NFT Landing & Job Landing Template Pages
  * Profile, Settings, Invoice, Coming soon, Maintenance, Timeline, Pricing, Gallery, FAQ and many more Pages
```

--------------------------------

### SweetAlert with Long Content and Image

Source: https://themesbrand.com/velzon/docs/angular/sweetalert2

Displays a modal with a long content area and a custom image. This example utilizes `imageUrl`, `imageHeight`, `confirmButtonText`, `showLoaderOnConfirm`, and `allowOutsideClick`.

```typescript
Swal.fire({
imageUrl: 'https://placeholder.pics/svg/300x1500',
imageHeight: 1500,
confirmButtonText: 'Yes, delete it!',
showLoaderOnConfirm: true,
allowOutsideClick: false,
buttonsStyling: false,
customClass: {
    confirmButton: 'btn btn-primary px-4'
    },
});
```

--------------------------------

### Phone Number Formatting with Cleave.js

Source: https://themesbrand.com/velzon/docs/angular/input-mask

Example of using Cleave.js for phone number input formatting in Angular, adhering to a (xxx)xxx-xxxx pattern.

```html
<input type="text" class="form-control" id="cleave-phone" mask="(000)000-0000" placeholder="(xxx)xxx-xxxx">
```

--------------------------------

### Numeral Formatting with Cleave.js

Source: https://themesbrand.com/velzon/docs/angular/input-mask

Example of using Cleave.js for numeral (number) input formatting in Angular, allowing users to enter numerical values.

```html
<input type="number" class="form-control" placeholder="Enter numeral" id="cleave-numeral">
```

--------------------------------

### Prefix Formatting with Cleave.js

Source: https://themesbrand.com/velzon/docs/angular/input-mask

Example of using Cleave.js to format input fields with a predefined prefix in Angular. The input will automatically append the prefix.

```html
<input type="text" class="form-control" value="PREFIX-" mask="AAAA-AAAA-AAAA-AAAA" id="cleave-prefix">
```

--------------------------------

### Velzon Featured Apps

Source: https://themesbrand.com/velzon/docs/angular/index

Lists the featured applications included in the Velzon template, which are functional with JavaScript to aid developers.

```APIDOC
Featured Apps:
  * Calendar
  * Chat
  * Mailbox
  * eCommerce
  * Projects
  * Tasks
  * CRM
  * Crypto
  * Invoices
  * Support Tickets
  * NFT Marketplace
  * File Manager
  * To Do
  * Jobs
  * Api Key
```
Tokens:
Raw