Dropdown Overview

Ornamentum Dropdown is a highly configurable Angular component which support dropdown data representation. This component supports client/server/realtime data binding along with data filtering, grouping, selection, templating, theming and much more.

This component can be integrated with any UI framework and fully responsive dynamic mobile friendly component user interface design will deliver best user experience in any device resolution. Built with pure angular components and minimal peer dependencies to minimize overall bundle size. Guaranteed seamless integration via developer friendly component API along with rich example code based documentation. This component support all angular supported browsers out of the box.

Advanced Usage

Following example depicts the outer appearance of the Ornamentum Dropdown. Try out yourself in Stack Blitz Demo.

Select

Basic Installation

Angular 7 or higher version is required to use the latest version (3.2.1) of Ornamentum.

  1. Download & Install the Ornamentum package and its dependencies using the following command.

     npm install ornamentum lodash --save
    

    or

     yarn add ornamentum lodash
    
  2. Once the installation is successful, add the Ornamentum Dropdown component to your application Root Module as depicted below.

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { CommonModule } from '@angular/common';
    import { FormsModule } from '@angular/forms';
    
    import { DropdownModule } from 'ornamentum';
    
    import { AppComponent } from './app.component';
    
    // import app component module  
    @NgModule({
      bootstrap: [AppComponent],
      declarations: [AppComponent],
      // Refer https://angular.io/guide/frequent-ngmodules about module usages.
      imports: [
        BrowserModule, // Optional module
        CommonModule, // Optional module
        FormsModule, // Optional module
        DropdownModule.forRoot() // Import dropdown module with root configuration.
      ]
    })
    export class AppModule {
    }
    
  3. Import the Ornamentum theme style sheet reference to apply theming of your preference. Refer Themes section for more details.

    • SCSS: Include Ornamentum theme SCSS style sheets in Angular CLI config "styles".

      "styles": [
        "./node_modules/ornamentum/themes/dark.theme.scss",
        "./node_modules/ornamentum/themes/addon.dark.theme.scss",
        "styles.scss"
      ]
      

      You must install compass mixins if you are using scss style sheets. Install using either of following command depending on your package manager.

       npm install compass-mixins --dev
      

      or

       yarn add compass-mixins --dev
      
    • CSS: Include Ornamentum prebuilt CSS theme style sheets in Angular CLI config "styles".

      "styles": [
        "node_modules/ornamentum/prebuilt-themes/dark.theme.css",
        "node_modules/ornamentum/prebuilt-themes/addon.dark.theme.css",
        "styles.css"
      ]
      
  4. Finally, use Ornamentum dropdown component.

    Example usage component markup file
    <ng-dropdown
      [selectTrackBy]="'id'"
      [displayTrackBy]="'productType'"
      [items]="items"
      [filterable]="true"
      [showClearSelectionButton]="true"
      [showSelectedOptionRemoveButton]="true"
      [closeMenuOnSelect]="true"
      [limit]="50">
    </ng-dropdown>
    
    Example usage component controller class
    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      public data: any[] = [
        {
          productType: 'Cooking Gear',
          id: 10
        },
        {
          productType: 'Tents',
          id: 15
        },
        {
          productType: 'Sleeping Bags',
          id: 20
        },
        {
          productType: 'Lanterns',
          id: 25
        },
        {
          productType: 'Rope',
          id: 30
        },
        {
          productType: 'Tents',
          id: 35
        },
        {
          productType: 'Lanterns',
          id: 40
        },
        {
          productType: 'Climbing Accessories',
          id: 45
        },
        {
          productType: 'Tents',
          id: 50
        },
        {
          productType: 'Safety',
          id: 55
        }
      ];
    }
    

Peer Dependencies

Following dependencies are required to be installed along with Ornamentum.

Functionality

Refer below sections for available feature/functionality usage in detail.

Data Table Basic Usage
API Doc for Dropdown Module