NgxStLcDrawer

Angular Material sidenav drawer component for displaying application launcher with app list navigation.

Table of Contents

• Overview
• Installation
• Basic Usage
• Inputs
• Models
• Methods
• Examples

Overview

The ngx-st-lc-drawer component provides a Material Design sidenav drawer with an application launcher. Perfect for:

• Multi-application portals
• Application navigation menus
• App switcher interfaces
• Dashboard launchers

Installation

npm install ngx-st-lc-drawer

Import the module in your application:

import { NgxStLcDrawerModule } from 'ngx-st-lc-drawer';

@NgModule({
  imports: [
    NgxStLcDrawerModule
  ]
})
export class AppModule { }

Basic Usage

<ngx-st-drawer-lib [lcUserInit]="userApps">
  <!-- Your main content goes here -->
  <div class="main-content">
    <router-outlet></router-outlet>
  </div>
</ngx-st-drawer-lib>

export class AppComponent {
  userApps: LcUserInitModel = {
    appList: [
      {
        appName: 'Dashboard',
        appDescription: 'Main Dashboard',
        appUrl: '/dashboard',
        iconUrl: 'assets/icons/dashboard.svg',
        isLuncher: false
      },
      {
        appName: 'Analytics',
        appDescription: 'Analytics & Reports',
        appUrl: '/analytics',
        iconUrl: 'assets/icons/analytics.svg',
        isLuncher: false
      },
      {
        appName: 'Settings',
        appDescription: 'Application Settings',
        appUrl: '/settings',
        iconUrl: 'assets/icons/settings.svg',
        isLuncher: false
      }
    ]
  };
}

Inputs

lcUserInit

• Type: LcUserInitModel
• Description: Configuration object containing the list of applications to display in the drawer.
• Example:

  [lcUserInit]="appConfig"

Models

LcUserInitModel

interface LcUserInitModel {
  appList: AppListItem[];
}

AppListItem

interface AppListItem {
  appName: string;          // Display name of the application
  appDescription: string;   // Description/subtitle for the application
  appUrl: string;           // Navigation URL or external link
  iconUrl: string;          // Path to application icon image
  isLuncher: boolean;       // Flag indicating if this is a launcher app
}

Methods

Access Drawer Programmatically

The component exposes the MatDrawer instance that can be accessed via @ViewChild:

@ViewChild(DrawerLibComponent) drawerComponent: DrawerLibComponent;

openDrawer() {
  this.drawerComponent.drawer.open();
}

closeDrawer() {
  this.drawerComponent.drawer.close();
}

toggleDrawer() {
  this.drawerComponent.drawer.toggle();
}

Examples

Basic Application Launcher

<ngx-st-drawer-lib [lcUserInit]="appLauncher">
  <div class="app-content">
    <mat-toolbar color="primary">
      <button mat-icon-button (click)="toggleMenu()">
        <mat-icon>menu</mat-icon>
      </button>
      <span>My Application</span>
    </mat-toolbar>
    
    <router-outlet></router-outlet>
  </div>
</ngx-st-drawer-lib>

export class AppComponent {
  @ViewChild(DrawerLibComponent) drawer: DrawerLibComponent;

  appLauncher: LcUserInitModel = {
    appList: [
      {
        appName: 'Home',
        appDescription: 'Return to home page',
        appUrl: '/',
        iconUrl: 'assets/icons/home.svg',
        isLuncher: false
      },
      {
        appName: 'Projects',
        appDescription: 'Manage your projects',
        appUrl: '/projects',
        iconUrl: 'assets/icons/projects.svg',
        isLuncher: false
      },
      {
        appName: 'Team',
        appDescription: 'Team management',
        appUrl: '/team',
        iconUrl: 'assets/icons/team.svg',
        isLuncher: false
      }
    ]
  };

  toggleMenu() {
    this.drawer.drawer.toggle();
  }
}

Multi-Application Portal

export class PortalComponent implements OnInit {
  @ViewChild(DrawerLibComponent) drawerComponent: DrawerLibComponent;
  
  portalApps: LcUserInitModel;

  constructor(
    private authService: AuthService,
    private appsService: AppsService
  ) {}

  ngOnInit() {
    // Load apps based on user permissions
    this.appsService.getUserApps(this.authService.getCurrentUser()).subscribe(apps => {
      this.portalApps = {
        appList: apps.map(app => ({
          appName: app.name,
          appDescription: app.description,
          appUrl: app.url,
          iconUrl: app.icon,
          isLuncher: app.type === 'launcher'
        }))
      };
    });
  }

  openAppMenu() {
    this.drawerComponent.drawer.open();
  }
}

Dynamic App List Based on Permissions

export class DynamicAppsComponent implements OnInit {
  appLauncher: LcUserInitModel = { appList: [] };

  constructor(
    private userService: UserService,
    private permissionService: PermissionService
  ) {}

  ngOnInit() {
    this.loadUserApps();
  }

  loadUserApps() {
    const allApps = [
      {
        appName: 'Admin Panel',
        appDescription: 'System administration',
        appUrl: '/admin',
        iconUrl: 'assets/icons/admin.svg',
        isLuncher: false,
        requiredPermission: 'admin'
      },
      {
        appName: 'User Management',
        appDescription: 'Manage users',
        appUrl: '/users',
        iconUrl: 'assets/icons/users.svg',
        isLuncher: false,
        requiredPermission: 'users.manage'
      },
      {
        appName: 'Analytics',
        appDescription: 'View analytics',
        appUrl: '/analytics',
        iconUrl: 'assets/icons/analytics.svg',
        isLuncher: false,
        requiredPermission: 'analytics.view'
      }
    ];

    // Filter apps based on user permissions
    const userApps = allApps.filter(app => 
      this.permissionService.hasPermission(app.requiredPermission)
    );

    this.appLauncher = {
      appList: userApps.map(app => ({
        appName: app.appName,
        appDescription: app.appDescription,
        appUrl: app.appUrl,
        iconUrl: app.iconUrl,
        isLuncher: app.isLuncher
      }))
    };
  }
}

Controlling Drawer State

export class DrawerControlComponent {
  @ViewChild(DrawerLibComponent) drawerComponent: DrawerLibComponent;
  
  appLauncher: LcUserInitModel = { /* ... */ };
  
  // Open drawer on component init
  ngAfterViewInit() {
    this.drawerComponent.drawer.open();
  }
  
  // Close drawer after navigation
  onNavigate() {
    this.drawerComponent.drawer.close();
  }
  
  // Toggle based on screen size
  @HostListener('window:resize', ['$event'])
  onResize(event: any) {
    if (event.target.innerWidth < 768) {
      this.drawerComponent.drawer.close();
    }
  }
}

Features

Material Design Integration

• Built on Angular Material's MatSidenav
• Follows Material Design guidelines
• Responsive layout support

Application Navigation

• Display list of applications with icons and descriptions
• Internal routing support
• External URL support
• Launcher app identification

Drawer Control

• Programmatic open/close/toggle
• Event subscriptions
• Responsive behavior

Customization

• Custom styling support
• Flexible content projection
• Dynamic app list updates

Build

Run ng build ngx-st-lc-drawer to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build ngx-st-lc-drawer, go to the dist folder cd dist/ngx-st-lc-drawer and run npm publish.