Setup

  1. Docs
  2. Setup

Nazox is a fully featured premium admin dashboard template in Angular 18 with Firebase and fack-backend authentication and developer-friendly codes. We have not used jQuery in this template its pure Angular 18 admin template with reusable components.

Note: You need to fill firebase credentials in src/environments/environment.ts and src/environments/environment.prod.ts file.
You have to create an authentication app from https://firebase.google.com
Firebase

Set defaultauth=firebase in the src/environments/environment.ts file.
Also fill all the firebase credentials in the src/environments/environment.ts file. 

                                          		  
export const environment = {
production: false,
defaultauth: 'firebase',
firebaseConfig: {
        apiKey: '',
        authDomain: '',
        databaseURL: '',
        projectId: '',
        storageBucket: '',
        messagingSenderId: '',
        appId: '',
        measurementId: ''
    }
};
Fack-Backend

Default we have set fack-backend authentication in this template. You can simply change to firebase or fack-backend by changing in src/environments/environments.ts file and for production src/environments/environments.prod.ts file.

Prerequisites

Please follow below steps to install and setup all rerequisites:

  • Node

    Make sure to have the Node installed & running in your computer. If you already have installed node on your computer, you can skip this step. Node version must be greater then equal to 10.

  • Git

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

Installation

To setup the admin template, follow below-mentioned steps:

  • Install Prerequisites

    Make sure to have all above prerequisites installed & running on your computer.

After you finished with the above steps, you can run the following commands to run the project locally or build for production use:

Command Description
npm install This would install all the required dependencies in the node_modules folder.
ng serve Runs the project locally, starts the development server and watches for any changes in your code. The development server is accessible at http://localhost:4200.
ng build Generates a /dist directory with all the development files.
ng build --prod Generates a /dist directory with all the production files.
Multilingual translation settings

How to add new language?
Let's add French language in the existing language.

  1. Create fr.json file with reference to default language file and add it to src/assets/i18n folder.
  2. Go to src/app/core/services/language.service.ts file and add i18n language short form "fr" to languages array.
    export class LanguageService {
    public languages: string[] = ['en', 'es', 'de', 'it', 'ru', "fr"];
  3. In src/app/layouts/shared/topbar/topbar.component.ts add new language properties in listLang array.
    listLang = [
    { text: 'English', flag: 'assets/images/flags/us.jpg', lang: 'en' },
    { text: 'Spanish', flag: 'assets/images/flags/spain.jpg', lang: 'es' },
    { text: 'German', flag: 'assets/images/flags/germany.jpg', lang: 'de' },
    { text: 'Italian', flag: 'assets/images/flags/italy.jpg', lang: 'it' },
    { text: 'Russian', flag: 'assets/images/flags/russia.jpg', lang: 'ru' },
    { text: 'French', flag: 'assets/images/flags/french.jpg', lang: 'fr' },
    ];
  4. Add new anchor tage to topbar.component.html file at src/app/layouts/topbar/topbar.component.html
    <a href="javascript:void(0);" class="dropdown-item notify-item" *ngFor="let item of listLang" (click)="setLanguage(item.lang)" [ngClass]="{'active': cookieValue === item.lang}">
    <img src="{{item.flag}}" alt="user-image" class="mr-1" height="12"> <span class="align-middle">{{item.text}}</span>
    </a>