Dropdown menu for Angular

In fact, this is a wrapper around the popperjs library.

Quick start

npm install ngx-azh-dropdown --save

Angular version

This library is built to work with Angular ^17.1.0.

Simple example

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxAzhDropdownModule } from 'ngx-azh-dropdown';
import { AppComponent } from './app.component';
import { YourMenuComponent } from './your-menu.component';

@NgModule({
    imports: [BrowserModule, NgxAzhDropdownModule],
    declarations: [AppComponent, YourMenuComponent],
    bootstrap: [AppComponent],
})
export class MyAppModule {
}

// app.component.ts
import { Component } from '@angular/core';
import { NgxAzhDropdownModule } from 'ngx-azh-dropdown';
import { YourMenuComponent } from './your-menu.component';

@Component({
    selector: 'app-root',
    template: `
    <!-- IMPORTANT: place this tag in your bootstrap component! -->
    <ngx-azh-dropdown-placement></ngx-azh-dropdown-placement>
    
    <a
      #anchor
      (click)="openDropdown(anchor)">
      Open dropdown menu
    </a>
    `
})
export class AppComponent {
    
    constructor(private dropdownService: NgxAzhDropdownService) {
    }

    /**
     *
     */
    public openDropdown(button: HTMLElement): void {
      const menu = this.dropdownService.create(button, MenuComponent);

      // If you want to get a result from a menu, you need to implement
      // a dataflow or promise and subscribe to it through an instance.
      menu.instance.result.subscribe(() => {
        /* do something */
      });
    }
}

API

Inject tag

Inject the <ngx-azh-dropdown-placement></ngx-azh-dropdown-placement> tag into your autoload component. Otherwise, the library will not be able to show the menu!

<!-- YOUR HTML -->

<ngx-azh-dropdown-placement></ngx-azh-dropdown-placement>

<!-- YOUR HTML -->

Methods and properties:

create<T = any>(button, view, options): ComponentRef <T> | null - To create a menu.

Important: null will return when you click on the anchor again and the menu will be closed.

• button [HTMLElement | NgxAzhDropdownVirtualElement] - required Link to anchor.
• view [Type<T>] - required Link to menu.
• options [NgxAzhDropdownOptions] - Menu options.

closeBy(uid: string): void - Close menu by uid.

clear(): void - Clear all menus.

size: number - Returns the number of open menus.

Interface: NgxAzhDropdownOptions

• zIndex [number]
• menuWidth [number | 'default']
• placement [Placement]
• popperCustomOptions [boolean]

License

MIT