Introduction

Borex is a fully featured premium admin dashboard template in Typescript with Firebase and fake-backend authentication and developer-friendly codes. We have not used jQuery in this template its pure Angular 18 admin template with reusable components. Sketch, XD files and Starterkit are also available.

Firebase

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

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

Fake-Backend

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

export const environment = {
    production: false,
    defaultauth: 'fakebackend'
};

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

Prerequisites

Please follow below steps to install and setup all prerequisites:

• Nodejs

  Make sure to have the Node.js installed & running in your computer. If you already have installed Node on your computer, you can skip this step if your existing node version is greater than 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.