ngx-admin Dashboard Template

repository·master·Indexed 12 days ago

An open-source Angular dashboard template version 11.0.0 built with the Nebular UI framework. It features a responsive layout, RTL support, configurable themes (including Material Dark and Light), and a rich component library with 40+ Angular components. The template includes an authentication module, a starter kit for clean projects, and integrated support for Bootstrap 4+ and SCSS.

Tokens: 4.4K
Snippets: 17
Records: 22
Agent score: 95%

What's inside ngx-admin

Overview of ngx-admin features
master
ngx-admin is an Angular-based admin dashboard template built on top of the Nebular UI framework. It provides a comprehensive set of tools for building administrative interfaces.
Key Features
- Angular & TypeScript: Built with modern web standards.
- Bootstrap 4+ & SCSS: Uses Bootstrap for styling and SCSS for advanced styling capabilities.
- Responsive Layout: Supports various screen sizes.
- RTL Support: Ready for right-to-left language layouts.
- Configurable Themes: Supports hot-reloadable themes.
- Authentication Module: Includes multiple providers for user authentication.
- Rich Component Library: Includes 40+ Angular components and 60+ usage examples.
https://github.com/akveo/ngx-admin/blob/master/README.md
Use the Material theme in ngx-admin
master
ngx-admin offers a Material-based theme that is backward-compatible with the standard ngx-admin setup. This theme works seamlessly with both Angular Material and Nebular.
To use the Material theme, you must checkout the feat/material-theme branch.
Available Material Themes
- Material Dark
- Material Light
```
git checkout feat/material-theme
```
https://github.com/akveo/ngx-admin/blob/master/README.md
Use the ngx-admin starter kit
master
If you want to use ngx-admin as a foundation without the pre-built pages and modules, you can use the Empty starter kit. This is ideal for starting a new project from a clean slate while retaining the core configuration.
To use the starter kit, checkout the starter-kit branch.
```
git checkout starter-kit
```
https://github.com/akveo/ngx-admin/blob/master/README.md
Install ngx-admin
master
To install ngx-admin, ensure you are using NodeJS version 14.14+. This requirement is due to the node-sass version utilized within the application.
https://github.com/akveo/ngx-admin/blob/master/README.md
Initialize Nebular modules in ngx-admin
master
To set up the core functionality of ngx-admin, you must import and initialize several Nebular modules using the .forRoot() pattern within your AppModule. This ensures that the necessary services and providers for components like sidebars, menus, dialogs, and toasts are correctly configured for the application lifecycle.
Key modules that require .forRoot() initialization include:
- NbSidebarModule
- NbMenuModule
- NbDatepickerModule
- NbDialogModule
- NbWindowModule
- NbToastrModule
- NbChatModule (requires configuration object)
- CoreModule (ngx-admin specific)
- ThemeModule (ngx-admin specific)
```
import { 
  NbChatModule, 
  NbDatepickerModule, 
  NbDialogModule, 
  NbMenuModule, 
  NbSidebarModule, 
  NbToastrModule, 
  NbWindowModule 
} from '@nebular/theme';
import { CoreModule } from './@core/core.module';
import { ThemeModule } from './@theme/theme.module';

@NgModule({
  imports: [
    NbSidebarModule.forRoot(),
    NbMenuModule.forRoot(),
    NbDatepickerModule.forRoot(),
    NbDialogModule.forRoot(),
    NbWindowModule.forRoot(),
    NbToastrModule.forRoot(),
    NbChatModule.forRoot({
      messageGoogleMapKey: 'YOUR_GOOGLE_MAP_KEY',
    }),
    CoreModule.forRoot(),
    ThemeModule.forRoot(),
  ],
})
export class AppModule {}
```
https://github.com/akveo/ngx-admin/blob/master/src/app/app.module.ts

Configure application routing in ngx-admin

master

The application uses Angular's RouterModule to define top-level routes. The routing configuration is split into two main functional areas: pages for the main application content and auth for authentication-related views using Nebular components.

Key routing behaviors:

The root path '' redirects to pages.
Any undefined path ** redirects to pages.
The auth path serves as a wrapper for various Nebular authentication components (login, register, etc.).
The pages path uses lazy loading to import the PagesModule.

export const routes: Routes = [
  {
    path: 'pages',
    loadChildren: () => import('./pages/pages.module')
      .then(m => m.PagesModule),
  },
  {
    path: 'auth',
    component: NbAuthComponent,
    children: [
      { path: '', component: NbLoginComponent },
      { path: 'login', component: NbLoginComponent },
      { path: 'register', component: NbRegisterComponent },
      { path: 'logout', component: NbLogoutComponent },
      { path: 'request-password', component: NbRequestPasswordComponent },
      { path: 'reset-password', component: NbResetPasswordComponent },
    ],
  },
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages' },
];

Available visual themes in ngx-admin
master
ngx-admin includes several visual themes that can be configured. The standard version includes 3 themes with hot-reload support, while the Material version provides additional options.
Standard Themes
- Dark
- Default
- Cosmic
- Corporate
Material Themes
- Material Dark
- Material Light
https://github.com/akveo/ngx-admin/blob/master/README.md
Use the ngx-legend-chart component
master
The ngx-legend-chart component displays a legend for e-commerce charts. It accepts an array of legend items via the legendItems input property. Each item in the array must specify a title and an iconColor.
```
<ngx-legend-chart [legendItems]='[
  { iconColor: 'green', title: 'Sales' },
  { iconColor: 'blue', title: 'Orders' }
]'></ngx-legend-chart>
```
https://github.com/akveo/ngx-admin/blob/master/src/app/pages/e-commerce/legend-chart/legend-chart.component.ts
Use the EarningData abstract class for earning data
master
The EarningData abstract class defines the contract for retrieving earning-related data used in dashboard visualizations. To use this in your application, you must implement a concrete class that provides the following methods, which return RxJS Observable streams:
- getEarningLiveUpdateCardData(currency: string): Returns an observable of an array (typically used for live update charts).
- getEarningCardData(currency: string): Returns an observable of LiveUpdateChart data.
- getEarningPieChartData(): Returns an observable of PieChart[] data.
```
export abstract class EarningData {
  abstract getEarningLiveUpdateCardData(currency: string): Observable<any[]>;
  abstract getEarningCardData(currency: string): Observable<LiveUpdateChart>;
  abstract getEarningPieChartData(): Observable<PieChart[]>;
}
```
https://github.com/akveo/ngx-admin/blob/master/src/app/%40core/data/earning.ts
Define electricity usage data structures
master
When implementing custom electricity data providers for ngx-admin, you should adhere to the following interfaces to ensure compatibility with existing charts and UI components. The Month interface represents monthly usage metrics, while Electricity represents a collection of monthly data points for a specific category. ElectricityChart is used for simplified label-value pairs suitable for chart visualizations.
```
export interface Month {
  month: string;
  delta: string;
  down: boolean;
  kWatts: string;
  cost: string;
}

export interface Electricity {
  title: string;
  active?: boolean;
  months: Month[];
}

export interface ElectricityChart {
  label: string;
  value: number;
}
```
https://github.com/akveo/ngx-admin/blob/master/src/app/%40core/data/electricity.ts
Configure NbChatModule with Google Maps key
master
The NbChatModule is initialized using .forRoot() and accepts a configuration object. One specific configuration option is messageGoogleMapKey, which is used for integrating Google Maps functionality within the chat component. If you are using chat features that rely on map integration, you must provide your API key here.
```
NbChatModule.forRoot({
  messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY',
}) 
```
https://github.com/akveo/ngx-admin/blob/master/src/app/app.module.ts
Use PlayerService for media playback management
master
The PlayerService manages a playlist of Track objects and provides methods to navigate through them. It maintains a current index representing the currently active track in the playlist array.
Track Data Structure
Each track in the playlist follows this structure:
- name: string
- artist: string
- url: string (source URL for the audio)
- cover: string (URL or path to the cover image)
Navigation Methods
- random(): Selects a random track from the playlist, updates the current index, and returns the selected Track.
- next(): Advances to the next track in the playlist. If the current track is the last one, it wraps around to the first track (index 0).
- prev(): Moves to the previous track in the playlist. If the current track is the first one (index 0), it wraps around to the last track in the playlist.
Note: The playlist is initialized with a default set of tracks, but can be extended or modified by accessing the playlist property.
```
// Example usage of PlayerService
import { PlayerService, Track } from './path-to-service';

// Assuming PlayerService is injected via Angular DI
const track: Track = playerService.next();
console.log(`Now playing: ${track.name} by ${track.artist}`);

const randomTrack: Track = playerService.random();
const previousTrack: Track = playerService.prev();
```
https://github.com/akveo/ngx-admin/blob/master/src/app/%40core/utils/player.service.ts

ngx-admin Dashboard Template

What's inside ngx-admin

Key Features

Available Material Themes

Standard Themes

Material Themes

Track Data Structure

Navigation Methods