Nazox - Angular 17 Admin & Dashboard Template

Setup

Nazox is a fully featured premium admin dashboard template in Angular 17 with Firebase and fack-backend authentication and developer-friendly codes. We have not used jQuery in this template its pure Angular 17 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.

Create fr.json file with reference to default language file and add it to src/assets/i18n folder.
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"];
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' }, ];
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>