dashboard-material-ui Example

This project demonstrates how to implement modal popups in an Angular application using the dashboard-material-ui package.

Table of Contents

• Installation
• Setup
• Usage
• Component Example
• Complete Code Structure
• Live Demo
• License

Installation

To install the dashboard-material-ui package, run the following command: npm i dashboard-material-ui@latest

setup

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DashBoardModule } from 'dashboard-material-ui';

@NgModule({
  declarations: [
    AppComponent,
    Test1Component,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DashBoardModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }

usage

export interface NavItem {
    displayName: string;
    disabled?: boolean;
    iconName?: string;
    route?: string;
    children?: NavItem[];
    FontAwesomeIcon?: string;
}
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'angular-tour-of-heroes';
  navItems: NavItem[] = [
    {
      displayName: 'Buyer Credit',
      iconName: '',
      route: 'home',
      FontAwesomeIcon: 'fa fa-bars',
      children: [
        {
          displayName: 'Inward',
          iconName: 'group',
          route: '/Home/Inward',
        },
        {
          displayName: 'Outward',
          iconName: 'group',
          route: '/Home/Outward',
        },
      ],
    },
    {
      displayName: 'CA',
      iconName: 'recent_actors',
      route: '/Home/CA',
    },
  ];
}

<dashboard [Items]="this.navItems" title="Admin Dashboard"></dashboard>

Live Demo

You can view and run the example project live on StackBlitz: link.