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

2. 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',
    }],
  };
}

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