Dropdown List Overview

Ornamentum dropdown component is a highly configurable lightweight data dropdown list Angular component with multi and single selection modes. Additionally, it 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. It's 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. Ornamentum works with all angular supported browsers out of the box.

Usage Demo

Following example depicts the basic usage of the Ornamentum dropdown list component. Try out yourself in Stack Blitz Demo.

Select

Basic Installation

Ornamentum major versions are aligned with Angular Major versions hence, You can ONLY use Ornamentum 8.x.x versions with Angular 8.x.x version. Latest Ornamentum version (8.1.1) require Angular 8.x.x version.

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

     npm install ornamentum --save
    

    or

     yarn add ornamentum
    
  2. Once the installation is successful, add the Ornamentum dropdown list component to your application root module as shown 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. Follow Angular CLI: Global Styles documentation for more information on how to integrate third party style sheets. Refer Ornamentum Themes documentation for more details about theme style sheet references.

    SCSS (recommended): Include Ornamentum theme source SCSS references.

    "./node_modules/ornamentum/themes/dark.theme.scss"
    "./node_modules/ornamentum/themes/addon.dark.theme.scss"
    

    or

    CSS: Include Ornamentum prebuilt CSS references.

    "node_modules/ornamentum/prebuilt-themes/dark.theme.css"
    "node_modules/ornamentum/prebuilt-themes/addon.dark.theme.css"
    
  4. Finally, use Ornamentum dropdown list 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'"
      [options]="options"
      [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.

API Doc for Dropdown Module
Data Table Basic Usage