Convert Figma logo to code with AI

akveo logongx-admin

Customizable admin dashboard template based on Angular 10+

25,185
7,942
25,185
484

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

  1. 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 {}
  1. 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',
    }],
  };
}
  1. 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:

  1. Clone the repository:

    git clone https://github.com/akveo/ngx-admin.git
    
  2. Install dependencies:

    cd ngx-admin
    npm install
    
  3. Start the development server:

    npm start
    
  4. 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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

ngx-admin Eva Design System

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 DarkMaterial Light
DarkDefault
CosmicCorporate

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!