Top Related Projects
CoreUI Angular is free Angular 18 admin template based on Bootstrap 5
Simple Dashboard Admin App built using Angular 8 and Bootstrap 4
AngularJS implementation of the RDash admin dashboard theme
Quick Overview
ngx-admin is a customizable admin dashboard template built with Angular and Nebular. It provides a robust foundation for creating modern, responsive web applications with a focus on admin interfaces. The project offers a variety of UI components, layouts, and themes to accelerate development.
Pros
- Extensive set of pre-built UI components and layouts
- Customizable themes and styles
- Regular updates and active community support
- Integration with popular charting libraries and authentication providers
Cons
- Steep learning curve for developers new to Angular or Nebular
- Large bundle size due to numerous features and dependencies
- Some users report performance issues with complex dashboards
- Limited documentation for advanced customization scenarios
Code Examples
- Creating a basic card component:
import { Component } from '@angular/core';
@Component({
selector: 'app-basic-card',
template: `
<nb-card>
<nb-card-header>Card Title</nb-card-header>
<nb-card-body>
This is the card content.
</nb-card-body>
</nb-card>
`,
})
export class BasicCardComponent {}
- Implementing a simple chart using ngx-echarts:
import { Component } from '@angular/core';
@Component({
selector: 'app-line-chart',
template: `
<div echarts [options]="chartOption" class="demo-chart"></div>
`,
})
export class LineChartComponent {
chartOption = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
}],
};
}
- Using the NbAuthService for user authentication:
import { Component } from '@angular/core';
import { NbAuthService, NbAuthResult } from '@nebular/auth';
@Component({
selector: 'app-login',
template: `
<nb-auth-block>
<form (ngSubmit)="login()">
<!-- Login form fields -->
<button nbButton status="primary" type="submit">Log In</button>
</form>
</nb-auth-block>
`,
})
export class LoginComponent {
constructor(private authService: NbAuthService) {}
login() {
this.authService.authenticate('email', { email: 'user@example.com', password: 'password' })
.subscribe((result: NbAuthResult) => {
if (result.isSuccess()) {
// Handle successful login
}
});
}
}
Getting Started
To get started with ngx-admin, follow these steps:
-
Clone the repository:
git clone https://github.com/akveo/ngx-admin.git
-
Install dependencies:
cd ngx-admin npm install
-
Start the development server:
npm start
-
Open your browser and navigate to
http://localhost:4200
to see the admin dashboard.
Competitor Comparisons
CoreUI Angular is free Angular 18 admin template based on Bootstrap 5
Pros of CoreUI Free Angular Admin Template
- More lightweight and faster to load
- Cleaner, more modern UI design
- Better documentation and easier setup process
Cons of CoreUI Free Angular Admin Template
- Fewer pre-built components and pages
- Less customization options out of the box
- Smaller community and fewer third-party extensions
Code Comparison
ngx-admin:
import { NbMenuItem } from '@nebular/theme';
export const MENU_ITEMS: NbMenuItem[] = [
{
title: 'Dashboard',
icon: 'home-outline',
link: '/pages/dashboard',
home: true,
},
// ...
];
CoreUI Free Angular Admin Template:
import { INavData } from '@coreui/angular';
export const navItems: INavData[] = [
{
name: 'Dashboard',
url: '/dashboard',
icon: 'icon-speedometer',
badge: {
variant: 'info',
text: 'NEW'
}
},
// ...
];
Both templates use similar approaches for defining navigation items, but CoreUI uses a simpler structure with fewer nested properties. ngx-admin's approach offers more flexibility for complex menu structures, while CoreUI's is more straightforward for basic navigation needs.
Simple Dashboard Admin App built using Angular 8 and Bootstrap 4
Pros of SB-Admin-BS4-Angular-8
- Simpler and more lightweight, making it easier to customize and integrate into existing projects
- Uses Bootstrap 4, which may be more familiar to some developers
- Includes a variety of pre-built pages and components out of the box
Cons of SB-Admin-BS4-Angular-8
- Less feature-rich compared to ngx-admin, with fewer advanced components and layouts
- Not as actively maintained, with less frequent updates and potentially fewer bug fixes
- Limited theming options compared to ngx-admin's extensive customization capabilities
Code Comparison
SB-Admin-BS4-Angular-8:
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="btn btn-link btn-sm order-1 order-lg-0" id="sidebarToggle" href="#">
<i class="fas fa-bars"></i>
</button>
</nav>
ngx-admin:
<nb-layout>
<nb-layout-header fixed>
<nb-actions size="medium">
<nb-action icon="menu-2-outline" (click)="toggle()"></nb-action>
</nb-actions>
</nb-layout-header>
</nb-layout>
The code comparison shows that SB-Admin-BS4-Angular-8 uses standard Bootstrap classes and HTML structure, while ngx-admin utilizes Nebular components for a more customized and feature-rich layout. This reflects the overall difference in complexity and flexibility between the two admin templates.
AngularJS implementation of the RDash admin dashboard theme
Pros of rdash-angular
- Lightweight and minimalistic design, focusing on essential dashboard components
- Easier to customize and extend due to its simpler structure
- Faster initial load time and better performance for basic dashboard needs
Cons of rdash-angular
- Less feature-rich compared to ngx-admin's extensive component library
- Limited built-in themes and customization options
- Less frequent updates and smaller community support
Code Comparison
rdash-angular:
<div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak>
<div id="sidebar-wrapper">
<ul class="sidebar">
<li class="sidebar-main">
<a ng-click="toggleSidebar()">
Dashboard
<span class="menu-icon glyphicon glyphicon-transfer"></span>
</a>
</li>
</ul>
</div>
</div>
ngx-admin:
<nb-layout>
<nb-layout-header fixed>
<nb-actions size="medium">
<nb-action icon="menu-2-outline" (click)="toggle()"></nb-action>
</nb-actions>
</nb-layout-header>
<nb-sidebar></nb-sidebar>
<nb-layout-column>
<router-outlet></router-outlet>
</nb-layout-column>
</nb-layout>
The code comparison shows that rdash-angular uses a more traditional HTML structure with Angular directives, while ngx-admin utilizes custom components from the Nebular UI library, offering a more modular and feature-rich approach to building dashboard layouts.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
ngx-admin
Live Demo | Who uses ngx-admin? | Documentation | Installation Guidelines | Angular templates
Admin template based on Angular and Nebular
Repository state and engagement with the community
Repository is currently in a state of minimal maintenance. Our primary focus is on ensuring that the Angular version used in this project is kept up to date. Our capacity to engage in other aspects of repository management is currently limited.
We are not actively reviewing or merging pull requests, responding to or resolving issues at this time. We appreciate the effort and contributions from the community and we understand that issues are crucial for the community. But now our current focus is solely on maintaining Angular.
Installation notes
To install ngx-admin you have to use NodeJS version 14.14+ because of node-sass version utilized in the application.
Key features
- The most popular and trusted Angular open source dashboard template is out there. Used by hundreds of thousands developers worldwide and Fortune 500 companies*.
- Over 40+ Angular Components and 60+ Usage Examples. Kick off your project and save money by using ngx-admin.
- Already using ngx-admin and willing to switch to material theme? Material theme is backward-compatible. Check out the article describing how to do that.
- ngx-admin material works perfectly with Angular Material and Nebular. Take the best from both!
What's included:
- Angular & Typescript
- Bootstrap 4+ & SCSS
- Responsive layout
- RTL support
- High resolution
- Flexibly configurable themes with hot-reload (3 themes included)
- Authentication module with multiple providers
- 40+ Angular Components
- 60+ Usage Examples
Material theme for ngx-admin
Material admin theme is based on the most popular Angular dashboard template - ngx-admin
To use material theme checkout feat/material-theme
branch.
Templates
With 6 stunning visual themes
Material Dark | Material Light |
Dark | Default |
Cosmic | Corporate |
Documentation
This template is using Nebular modules set, here you can find documentation and other useful articles.
Empty starter kit
Don't need all the pages and modules and just looking for an empty starter kit for your next project? Check out our starter-kit branch.
BrowserStack
This project runs its tests on multiple desktop and mobile browsers using BrowserStack.
UI Bakery
Need a visual admin dashboard builder? Check out UI Bakery.
More from Akveo
- Eva Icons - 480+ beautiful Open Source icons
- Nebular - Angular Components, Auth and Security
- Akveo templates - 10+ Ready-to-use apps templates to speed up your apps developments
How can I support developers?
- Star our GitHub repo :star:
- Create pull requests, submit bugs, suggest new features or documentation updates :wrench:
- Follow us on Twitter :feet:
- Like our page on Facebook :thumbsup:
Looking for engineering services?
Visit our homepage or simply leave us a message to contact@akveo.com. We will be happy to work with you!
From Developers
Made with :heart: by Akveo team. Follow us on Twitter to get the latest news first! We're always happy to receive your feedback!
Top Related Projects
CoreUI Angular is free Angular 18 admin template based on Bootstrap 5
Simple Dashboard Admin App built using Angular 8 and Bootstrap 4
AngularJS implementation of the RDash admin dashboard theme
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot