Dropdown Overview

Ornamentum Dropdown is a highly configurable Angular component which supports option selector view data representation. Ornamentum dropdown supports client/server/real-time data binding along with data filtering, grouping, load on scroll mode, selection, templating, state persistence, theming and much more.

Ornamentum dropdown can be integrated with any of the UI frameworks that are currently available. The fully responsive, dynamic and mobile friendly design of the user interface will deliver the best user experience in any device resolution. The Dropdown is built with pure angular components and minimal peer dependencies to minimize overall bundle size. Seamless integration via developer friendly API along with a rich sample code based documentation. The Dropdown supports all angular supported browsers out of the box.

Usage Demo

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

Select

Basic Installation

Angular 8.x.x version is required to use the latest version (8.0.0) of Ornamentum.

  1. Install Ornamentum packages and it's peer dependencies using either of following command depending on your package manager.

     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 Usage (recommended approach): Include Ornamentum theme SCSS style sheets in Angular CLI config styles array.

      "styles": [
        "./node_modules/ornamentum/themes/dark.theme.scss",
        "./node_modules/ornamentum/themes/addon.dark.theme.scss",
        "styles.scss"
      ]
      
    • CSS Usage: Include Ornamentum prebuilt CSS theme style sheets in Angular CLI config styles array.

      "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 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
        }
      ];
    }
    
    Example usage component markup file
    <ng-dropdown
      [id]="'products_overview_02'"
      [selectTrackBy]="'id'"
      [displayTrackBy]="'productType'"
      [items]="items"
      [filterable]="true"
      [showClearSelectionButton]="true"
      [showSelectedOptionRemoveButton]="true"
      [closeMenuOnSelect]="true"
      [limit]="50">
    </ng-dropdown>
    

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