### Install Angular2 Multiselect Dropdown via npm

Source: https://context7.com/cuppalabs/angular2-multiselect-dropdown/llms.txt

Installs the angular2-multiselect-dropdown library using npm. This command downloads and installs the necessary package and its dependencies for use in an Angular project. It prepares the library for import and integration within the application's components and modules.

```bash
npm install angular2-multiselect-dropdown
```

--------------------------------

### Angular Component Setup for Multiselect Dropdown

Source: https://github.com/cuppalabs/angular2-multiselect-dropdown/blob/master/projects/angular2-multiselect-dropdown-lib/README.md

This TypeScript code shows how to set up the necessary variables and methods within an Angular component to use the multiselect dropdown. It includes defining the data list, selected items, settings, and event handlers for item selection, deselection, and selecting/deselecting all items.

```typescript
import { Component, OnInit } from '@angular/core';

export class AppComponent implements OnInit {
    dropdownList = [];
    selectedItems = [];
    dropdownSettings = {};
    ngOnInit(){
        this.dropdownList = [
                              {"id":1,"itemName":"India"},
                              {"id":2,"itemName":"Singapore"},
                              {"id":3,"itemName":"Australia"},
                              {"id":4,"itemName":"Canada"},
                              {"id":5,"itemName":"South Korea"},
                              {"id":6,"itemName":"Germany"},
                              {"id":7,"itemName":"France"},
                              {"id":8,"itemName":"Russia"},
                              {"id":9,"itemName":"Italy"},
                              {"id":10,"itemName":"Sweden"}
                            ];
        this.selectedItems = [
                                {"id":2,"itemName":"Singapore"},
                                {"id":3,"itemName":"Australia"},
                                {"id":4,"itemName":"Canada"},
                                {"id":5,"itemName":"South Korea"}
                            ];
        this.dropdownSettings = { 
                                  singleSelection: false, 
                                  text:"Select Countries",
                                  selectAllText:'Select All',
                                  unSelectAllText:'UnSelect All',
                                  enableSearchFilter: true,
                                  classes:"myclass custom-class"
                                };            
    }
    onItemSelect(item:any){
        console.log(item);
        console.log(this.selectedItems);
    }
    OnItemDeSelect(item:any){
        console.log(item);
        console.log(this.selectedItems);
    }
    onSelectAll(items: any){
        console.log(items);
    }
    onDeSelectAll(items: any){
        console.log(items);
    }
}
```

--------------------------------

### Implement Lazy Loading for Large Datasets

Source: https://context7.com/cuppalabs/angular2-multiselect-dropdown/llms.txt

This example demonstrates how to implement lazy loading to efficiently handle large datasets. By enabling the 'lazyLoading' setting, the dropdown uses virtual scrolling, loading more items as the user scrolls down, which improves performance and reduces initial load times.

```typescript
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-lazy-loading',
  template: `
    <angular2-multiselect
      [data]="itemList"
      [(ngModel)]="selectedItems"
      [settings]="settings"
      (onScrollToEnd)="onScrollToEnd($event)">
    </angular2-multiselect>
  `
})
export class LazyLoadingComponent implements OnInit {
  itemList = [];
  selectedItems = [];
  settings = {};

  ngOnInit() {
    // Generate large dataset (1000+ items)
    this.itemList = [];
    for (let i = 1; i <= 1000; i++) {
      this.itemList.push({
        "id": i,
        "itemName": `Item ${i}`,
        "category": this.getRandomCategory()
      });
    }

    this.selectedItems = [];

    this.settings = {
      text: "Select Items",
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      enableSearchFilter: true,
      lazyLoading: true,  // Enable virtual scrolling
      badgeShowLimit: 4,
      maxHeight: 300,
      tagToBody: true
    };
  }

  getRandomCategory(): string {
    const categories = ["Type A", "Type B", "Type C", "Type D"];
    return categories[Math.floor(Math.random() * categories.length)];
  }

  onScrollToEnd(event: any) {
    console.log('Scrolled to end:', event);
    // Load more data here if fetching from API
    // this.loadMoreItems();
  }
}
```

--------------------------------

### Utilize Group By Feature for Categorization

Source: https://context7.com/cuppalabs/angular2-multiselect-dropdown/llms.txt

This example showcases the 'groupBy' functionality, allowing items in the dropdown to be organized into collapsible groups based on a specified property (e.g., 'category'). It also includes options to select entire groups and handles group selection/deselection events.

```typescript
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-group-by',
  template: `
    <angular2-multiselect
      [data]="itemList"
      [(ngModel)]="selectedItems"
      [settings]="settings"
      (onGroupSelect)="onGroupSelect($event)"
      (onGroupDeSelect)="onGroupDeSelect($event)">
    </angular2-multiselect>
  `
})
export class GroupByComponent implements OnInit {
  itemList = [];
  selectedItems = [];
  settings = {};

  ngOnInit() {
    this.itemList = [
      {"id": 1, "itemName": "India", "category": "asia"},
      {"id": 2, "itemName": "Singapore", "category": "asia pacific"},
      {"id": 3, "itemName": "Germany", "category": "Europe"},
      {"id": 4, "itemName": "France", "category": "Europe"},
      {"id": 5, "itemName": "South Korea", "category": "asia"},
      {"id": 6, "itemName": "Sweden", "category": "Europe"}
    ];

    this.selectedItems = [
      {"id": 1, "itemName": "India", "category": "asia"},
      {"id": 5, "itemName": "South Korea", "category": "asia"}
    ];

    this.settings = {
      singleSelection: false,
      text: "Select Countries",
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      searchPlaceholderText: 'Search Countries',
      enableSearchFilter: true,
      groupBy: "category",  // Group items by this field
      selectGroup: true,    // Allow selecting entire groups
      searchBy: ["itemName"],
      enableCheckAll: true,
      tagToBody: true
    };
  }

  onGroupSelect(selectedGroupItem: any) {
    console.log('Group selected:', selectedGroupItem);
    // Returns: { grpTitle: true, category: "asia", selected: true, list: [...] }
  }

  onGroupDeSelect(deselectedGroupItem: any) {
    console.log('Group deselected:', deselectedGroupItem);
  }
}
```

--------------------------------

### Template-Driven Forms Support - Angular

Source: https://github.com/cuppalabs/angular2-multiselect-dropdown/blob/master/projects/angular2-multiselect-dropdown-lib/README.md

Shows how to integrate the multiselect dropdown component with Angular's Template-Driven Forms. This example demonstrates binding the component's value to a form model using `[(ngModel)]` and handling form submission. The `name` attribute is crucial for form binding.

```html
<form (ngSubmit)="onSubmit()" #loginForm="ngForm" style="border: 1px solid #ccc; padding: 10px;">
        <div class="form-group">
            <label for="name">Skills</label>
            <angular2-multiselect [data]="itemList" [(ngModel)]="formModel.skills" 
                                  [settings]="settings" 
                                  (onSelect)="onItemSelect($event)"
                                  (onDeSelect)="OnItemDeSelect($event)" 
                                  (onSelectAll)="onSelectAll($event)" 
                                  (onDeSelectAll)="onDeSelectAll($event)" name="skills">
            </angular2-multiselect>
        </div>
</form>
```

```javascript
formModel = {
        name: '',
        email: 'ascasc@aa.com',
        skills: [{ "id": 1, "itemName": "Angular" }]
    };

```

--------------------------------

### Integrate Multiselect with Angular Reactive Forms

Source: https://context7.com/cuppalabs/angular2-multiselect-dropdown/llms.txt

This example demonstrates integrating the angular2-multiselect-dropdown component with Angular reactive forms. It utilizes the `FormBuilder` to create the form group and validators, and binds the multiselect component using `formControlName`. Input validation for required fields is also shown.

```typescript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-reactive-form',
  template: `
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()" novalidate>
      <div class="form-group">
        <label>Name</label>
        <input type="text" formControlName="name" class="form-control">
        <div *ngIf="userForm.get('name')?.invalid && userForm.get('name')?.touched">
          Name is required
        </div>
      </div>

      <div class="form-group">
        <label>Email</label>
        <input type="email" formControlName="email" class="form-control">
        <div *ngIf="userForm.get('email')?.invalid && userForm.get('email')?.touched">
          Valid email is required
        </div>
      </div>

      <div class="form-group">
        <label>Skills</label>
        <angular2-multiselect
          [data]="itemList"
          [(ngModel)]="selectedItems"
          [settings]="settings"
          formControlName="skills"
          (onSelect)="onItemSelect($event)"
          (onDeSelect)="OnItemDeSelect($event)">
        </angular2-multiselect>
        <div *ngIf="userForm.get('skills')?.invalid && userForm.get('skills')?.touched">
          At least one skill is required
        </div>
      </div>

      <button type="submit" [disabled]="!userForm.valid">Submit</button>
    </form>

    <div *ngIf="submitted">
      <h3>Form Value:</h3>
      <pre>{{ userForm.value | json }}</pre>
    </div>
  `
})
export class ReactiveFormComponent implements OnInit {
  userForm: FormGroup;
  itemList = [];
  selectedItems = [];
  settings = {};
  submitted = false;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.itemList = [
      {"id": 1, "itemName": "Angular"},
      {"id": 2, "itemName": "React"},
      {"id": 3, "itemName": "Vue"},
      {"id": 4, "itemName": "Node.js"},
      {"id": 5, "itemName": "TypeScript"}
    ];

    this.selectedItems = [];

    this.userForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      skills: [[], Validators.required]
    });

    this.settings = {
      text: "Select Skills",
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      enableSearchFilter: true,
      classes: "form-dropdown",
      tagToBody: true
    };
  }

  onItemSelect(item: any) {
    console.log('Item selected:', item);
  }

  OnItemDeSelect(item: any) {
    console.log('Item deselected:', item);
  }

  onSubmit() {
    if (this.userForm.valid) {
      this.submitted = true;
      console.log('Form submitted:', this.userForm.value);
    }
  }
}

```

--------------------------------

### Google Analytics Initialization

Source: https://github.com/cuppalabs/angular2-multiselect-dropdown/blob/master/docs/index.html

Initializes Google Analytics tracking for the application. It requires the Google Analytics script to be loaded and then sends a pageview event. No specific inputs or outputs are defined, and it assumes the presence of the 'ga' function.

```javascript
(function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r;
    i[r] = i[r] || function () {
        (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date();
    a = s.createElement(o), m = s.getElementsByTagName(o)[0];
    a.async = 1;
    a.src = g;
    m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-93566400-1', 'auto');
ga('send', 'pageview');
```

--------------------------------

### Implement Multiselect Dropdown in Angular Component

Source: https://context7.com/cuppalabs/angular2-multiselect-dropdown/llms.txt

Demonstrates the implementation of the multiselect dropdown in an Angular component, including data initialization, settings configuration, and event handling. It defines dropdownList and selectedItems data, sets the configuration via dropdownSettings, and handles select/deselect events.

```typescript
import { Component, OnInit } from '@angular/core';

export class AppComponent implements OnInit {
  dropdownList = [];
  selectedItems = [];
  dropdownSettings = {};

  ngOnInit() {
    this.dropdownList = [
      {"id": 1, "itemName": "India"},
      {"id": 2, "itemName": "Singapore"},
      {"id": 3, "itemName": "Australia"},
      {"id": 4, "itemName": "Canada"},
      {"id": 5, "itemName": "South Korea"}
    ];

    this.selectedItems = [
      {"id": 2, "itemName": "Singapore"},
      {"id": 3, "itemName": "Australia"}
    ];

    this.dropdownSettings = {
      singleSelection: false,
      text: "Select Countries",
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      enableSearchFilter: true,
      classes: "myclass custom-class"
    };
  }

  onItemSelect(item: any) {
    console.log('Selected:', item);
  }

  OnItemDeSelect(item: any) {
    console.log('Deselected:', item);
  }

  onSelectAll(items: any) {
    console.log('All selected:', items);
  }

  onDeSelectAll(items: any) {
    console.log('All deselected:', items);
  }
}
```

--------------------------------

### Chatra Live Chat Integration

Source: https://github.com/cuppalabs/angular2-multiselect-dropdown/blob/master/docs/index.html

Integrates the Chatra live chat service into the application. This involves setting up an ID and asynchronously loading the Chatra JavaScript SDK. It allows for customization of chat button colors and requires the Chatra script to be available.

```javascript
window.ChatraSetup = {
    colors: {
        buttonText: '#ffffff', /* chat button text color */
        buttonBg: '#e9a142' /* chat button background color */
    }
};
(function(d, w, c) {
    w.ChatraID = 'JTyKDCouJ8iRGe4vb';
    var s = d.createElement('script');
    w[c] = w[c] || function() {
        (w[c].q = w[c].q || []).push(arguments);
    };
    s.async = true;
    s.src = 'https://call.chatra.io/chatra.js';
    if (d.head) d.head.appendChild(s);
})(document, window, 'Chatra');
```

--------------------------------

### Component Settings

Source: https://github.com/cuppalabs/angular2-multiselect-dropdown/blob/master/projects/angular2-multiselect-dropdown-lib/README.md

The following settings can be configured to customize the behavior and appearance of the multiselect dropdown component.

```APIDOC
## Component Settings

### Description
This section details the various settings available to configure the angular2-multiselect-dropdown component.

### Method
N/A (Component Configuration)

### Endpoint
N/A (Component Configuration)

### Parameters
#### Component Settings
- **singleSelection** (Boolean) - To set the dropdown for single item selection only. Default: `false`
- **text** (String) - Text to be show in the dropdown, when no items are selected. Default: `'Select'`
- **enableCheckAll** (Boolean) - Enable the option to select all items in list. Default: `false`
- **selectAllText** (String) - Text to display as the label of select all option. Default: `'Select All'`
- **unSelectAllText** (String) - Text to display as the label of unSelect option. Default: `'UnSelect All'`
- **enableSearchFilter** (Boolean) - Enable filter option for the list. Default: `false`
- **enableFilterSelectAll** (Boolean) - A 'select all' checkbox to select all filtered results. Default: `true`
- **filterSelectAllText** (String) - Text to display as the label of select all option. Default: `'Select all filtered results'`
- **filterUnSelectAllText** (String) - Text to display as the label of unSelect option. Default: `'UnSelect all filtered results'`
- **maxHeight** (Number) - Set maximum height of the dropdown list in px. Default: `300`
- **badgeShowLimit** (Number) - Limit the number of badges/items to show in the input field. If not set will show all selected. Default: `All`
- **classes** (String) - Custom classes to the dropdown component. Classes are added to the dropdown selector tag. To add multiple classes, the value should be space separated class names. Default: `''`
- **limitSelection** (Number) - Limit the selection of number of items from the dropdown list. Once the limit is reached, all unselected items gets disabled. Default: `none`
- **disabled** (Boolean) - Disable the dropdown. Default: `false`
- **searchPlaceholderText** (String) - Custom text for the search placeholder text. Default: `'Search'`
- **groupBy** (String) - Name of the field by which the list should be grouped. Default: `none`
- **selectGroup** (Boolean) - Select a group at once. GroupBy should be enabled, to use this. Default: `false`
- **searchAutofocus** (Boolean) - Autofocus search input field. Default: `true`
- **labelKey** (String) - The property name which should be rendered as label in the dropdown. Default: `'itemName'`
- **primaryKey** (String) - The property by which the object is identified. Default: `'id'`
- **position** (String) - Set the position of the dropdown list to 'top' or 'bottom'. Default: `'bottom'`
- **noDataLabel** (String) - Label text when no data is available in the list. Default: `'No Data Available'`
- **searchBy** (Array) - Search the list by certain properties of the list item. Ex: `["itemName", "id", "name"]`. Default: `[]`
- **lazyLoading** (Boolean) - Enable lazy loading. Used to render large datasets. Default: `false`
- **showCheckbox** (Boolean) - Show or hide checkboxes in the list. Default: `true`
- **addNewItemOnFilter** (Boolean) - When you filter items and if, the item is not found, you can add the text as new item to the list. Default: `false`
- **addNewButtonText** (String) - The text in the button when `addNewItemOnFilter` is enabled. Default: `'Add'`
- **escapeToClose** (boolean) - Press escape key to close the dropdown. Default: `true`
- **autoPosition** (boolean) - Enable dropdown to open either on 'top' or 'bottom'. Ex: `settings = { position: 'bottom', autoPosition: false };` open the dropdown always at bottom. Default: `true`
- **tagToBody** (boolean) - If the dropdown to be appended to body or not ?. Default: `true`

### Request Example
```json
{
  "singleSelection": true,
  "text": "Select an option",
  "enableSearchFilter": true,
  "maxHeight": 400,
  "labelKey": "name",
  "primaryKey": "code"
}
```

### Response
#### Success Response (200)
N/A (Component Configuration)

#### Response Example
N/A (Component Configuration)
```

--------------------------------

### Implement Single Selection Mode in Angular

Source: https://context7.com/cuppalabs/angular2-multiselect-dropdown/llms.txt

Shows how to implement the single selection mode of the multiselect dropdown in an Angular component. It demonstrates the necessary configurations for enabling this mode and illustrates the selection behavior. It involves setting the singleSelection property to true.

```typescript
import { Component, OnInit } from '@angular/core';
import { DropdownSettings } from 'angular2-multiselect-dropdown';

@Component({
  selector: 'app-single-select',
  template: `
    <angular2-multiselect
      [data]="itemList"
      [(ngModel)]="selectedItems"
      [settings]="settings"
      (onSelect)="onItemSelect($event)">
    </angular2-multiselect>
  `
})
export class SingleSelectComponent implements OnInit {
  itemList = [];
  selectedItems = [];
  settings: DropdownSettings = {};

  ngOnInit() {
    this.itemList = [
      {"id": 1, "itemName": "Option 1"},
      {"id": 2, "itemName": "Option 2"},
      {"id": 3, "itemName": "Option 3"}
    ];

    this.selectedItems = [{"id": 1, "itemName": "Option 1"}];

    this.settings = {
      singleSelection: true,
      text: "Select Option",
      enableSearchFilter: false,
      classes: "single-select-dropdown",
      primaryKey: "id",
      labelKey: "itemName",
      tagToBody: true
    };
  }

  onItemSelect(item: any) {
    console.log('Selected item:', item);
    // Dropdown automatically closes after selection in single mode
  }
}
```

--------------------------------

### Dropdown State Events

Source: https://github.com/cuppalabs/angular2-multiselect-dropdown/blob/master/projects/angular2-multiselect-dropdown-lib/README.md

Handles events related to the opening and closing of the dropdown.

```APIDOC
## Dropdown State Events

### Description
These events are fired when the dropdown's visibility state changes.

### Events

- **`onOpen`**
  - **Description**: Callback method fired after the dropdown opens.
  - **Example**: `(onOpen)="onOpen($event)"`

- **`onClose`**
  - **Description**: Callback method fired when the dropdown is closed.
  - **Example**: `(onClose)="onClose($event)"`
```

--------------------------------

### Custom HTML for Menu Item - Angular

Source: https://github.com/cuppalabs/angular2-multiselect-dropdown/blob/master/projects/angular2-multiselect-dropdown-lib/README.md

Demonstrates how to use a custom template for individual menu items in the dropdown. This allows for rich content display, including images and labels, within each list option. Ensure the `c-item` directive is used correctly.

```html
<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings">
  <c-item>
          <ng-template let-item="item">
            <label style="color: #333;min-width: 150px;">{{item.itemName}}</label>
            <img [src]="item.image" style="width: 30px; border: 1px solid #efefef;margin-right: 20px;" />
            <label>Capital - {{item.capital}}</label>
          </ng-template>
  </c-item>    
</angular2-multiselect>
```

--------------------------------

### Angular Component for Event Tracking with Multiselect Dropdown

Source: https://context7.com/cuppalabs/angular2-multiselect-dropdown/llms.txt

This TypeScript component demonstrates how to integrate and manage events from the angular2-multiselect-dropdown. It initializes the dropdown with sample data and settings, and provides handler functions for various user interactions, logging them to the console and updating the UI.

```typescript
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-event-tracking',
  template: `
    <angular2-multiselect
      [data]="itemList"
      [(ngModel)]="selectedItems"
      [settings]="settings"
      (onSelect)="onItemSelect($event)"
      (onDeSelect)="OnItemDeSelect($event)"
      (onOpen)="onOpen($event)"
      (onClose)="onClose($event)"
      (onSelectAll)="onSelectAll($event)"
      (onDeSelectAll)="onDeSelectAll($event)">
    </angular2-multiselect>

    <div class="event-log">
      <h3>Event Log:</h3>
      <div class="log-entry" *ngIf="selectedItemString">
        <strong>Last Selected:</strong> {{ selectedItemString }}
      </div>
      <div class="log-entry" *ngIf="unSelectedItemString">
        <strong>Last Deselected:</strong> {{ unSelectedItemString }}
      </div>
      <div class="log-entry" *ngIf="openString">
        <strong>Dropdown Status:</strong> {{ openString }}
      </div>
      <div class="log-entry" *ngIf="closeString">
        <strong>Dropdown Status:</strong> {{ closeString }}
      </div>
      <div class="log-entry" *ngIf="selectAllString">
        <strong>Select All:</strong> {{ selectAllString }}
      </div>
      <div class="log-entry" *ngIf="unSelectAllString">
        <strong>Deselect All:</strong> {{ unSelectAllString }}
      </div>
    </div>
  `
})
export class EventTrackingComponent implements OnInit {
  itemList = [];
  selectedItems = [];
  settings = {};

  selectedItemString = '';
  unSelectedItemString = '';
  openString = '';
  closeString = '';
  selectAllString = '';
  unSelectAllString = '';

  ngOnInit() {
    this.itemList = [
      {"countryId": 1, "itemName": "India"},
      {"countryId": 2, "itemName": "Singapore"},
      {"countryId": 3, "itemName": "Australia"},
      {"countryId": 4, "itemName": "Canada"},
      {"countryId": 5, "itemName": "South Korea"}
    ];

    this.selectedItems = [];

    this.settings = {
      text: "Select Countries",
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      primaryKey: "countryId",
      enableSearchFilter: true,
      tagToBody: true
    };
  }

  onItemSelect(item: any) {
    this.selectedItemString = JSON.stringify(item);
    this.unSelectedItemString = '';
    console.log('Item selected:', item);
    console.log('Current selection:', this.selectedItems);
  }

  OnItemDeSelect(item: any) {
    this.unSelectedItemString = JSON.stringify(item);
    this.selectedItemString = '';
    console.log('Item deselected:', item);
    console.log('Current selection:', this.selectedItems);
  }

  onOpen(evt: any) {
    this.openString = "Dropdown opened at: " + new Date().toLocaleTimeString();
    this.closeString = '';
    console.log('Dropdown opened:', evt);
  }

  onClose(evt: any) {
    this.closeString = "Dropdown closed at: " + new Date().toLocaleTimeString();
    this.openString = '';
    console.log('Dropdown closed:', evt);
  }

  onSelectAll(items: any) {
    this.selectAllString = JSON.stringify(items);
    this.unSelectAllString = '';
    console.log('All items selected:', items);
  }

  onDeSelectAll(items: any) {
    this.unSelectAllString = "All items deselected";
    this.selectAllString = '';
    console.log('All items deselected:', items);
  }
}

```

--------------------------------

### Angular Event Binding for Select All and Group Actions

Source: https://github.com/cuppalabs/angular2-multiselect-dropdown/blob/master/README.md

This snippet shows how to bind to the `onSelectAll`, `onDeSelectAll`, `onGroupSelect`, and `onGroupDeSelect` events. These events handle actions related to selecting all items, deselecting all items, and managing selections within item groups.

```html
<angular2-multiselect-dropdown
    [data]="dropdownData"
    [(ngModel)]="selectedItems"
    (onSelectAll)="onSelectAll($event)"
    (onDeSelectAll)="onDeSelectAll($event)"
    (onGroupSelect)="onGroupSelect($event)"
    (onGroupDeSelect)="onGroupDeSelect($event)">
</angular2-multiselect-dropdown>
```

--------------------------------

### Include Multiselect Dropdown CSS Theme in Angular

Source: https://context7.com/cuppalabs/angular2-multiselect-dropdown/llms.txt

Shows how to include the default CSS theme for the multiselect dropdown component in the Angular application. This ensures that the component styles are applied correctly, providing the desired visual appearance and styling to the dropdown elements.

```css
/* Include in angular.json styles array */
"styles": [
  "node_modules/angular2-multiselect-dropdown/themes/default.theme.css"
]
```

--------------------------------

### Reactive Forms Support - Angular

Source: https://github.com/cuppalabs/angular2-multiselect-dropdown/blob/master/projects/angular2-multiselect-dropdown-lib/README.md

Demonstrates integrating the multiselect dropdown with Angular's Reactive Forms. This involves using `formControlName` to bind the component to a form control within a `FormGroup`. Ensure the `FormGroup` and its controls are properly initialized in the component's TypeScript file.

```html
<form [formGroup]="userForm" novalidate style="border: 1px solid #ccc; padding: 10px;">
        <div class="form-group">
            <label for="name">Skills</label>
           <angular2-multiselect [data]="itemList" [(ngModel)]="selectedItems" 
                                  [settings]="settings" 
                                  (onSelect)="onItemSelect($event)"
                                  (onDeSelect)="OnItemDeSelect($event)" 
                                  (onSelectAll)="onSelectAll($event)" 
                                  (onDeSelectAll)="onDeSelectAll($event)" formControlName="skills">
            </angular2-multiselect>
        </div>
</form>
```

```javascript
userForm: FormGroup;
this.userForm = this.fb.group({
            name: '',
            email: ['', Validators.required],
            skills: [[], Validators.required]
        });

```

--------------------------------

### Custom HTML for Selected Item Badge - Angular

Source: https://github.com/cuppalabs/angular2-multiselect-dropdown/blob/master/projects/angular2-multiselect-dropdown-lib/README.md

Illustrates how to customize the appearance of selected items displayed as badges. This feature allows for displaying concise information, like item names and small images, for each selection. Use the `c-badge` directive for this customization.

```html
<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings">
  <c-badge>
           <ng-template let-item="item">
            <label style="margin: 0px;">{{item.itemName}}</label>
            <img [src]="item.image" style="width: 16px; margin-right: 5px;" />
           </ng-template>
  </c-badge>  
</angular2-multiselect>
```

--------------------------------

### Group Events

Source: https://github.com/cuppalabs/angular2-multiselect-dropdown/blob/master/projects/angular2-multiselect-dropdown-lib/README.md

Handles events related to group selection and deselection.

```APIDOC
## Group Events

### Description
These events are triggered when entire groups of items are selected or deselected.

### Events

- **`onGroupSelect`**
  - **Description**: Returns the selected group items as an array.
  - **Example**: `(onGroupSelect)="onGroupSelect($event)"`

- **`onGroupDeSelect`**
  - **Description**: Returns the un-selected group items as an array.
  - **Example**: `(onGroupDeSelect)="onGroupDeSelect($event)"`
```

--------------------------------

### Configure Angular2 Multiselect Dropdown with All Settings

Source: https://context7.com/cuppalabs/angular2-multiselect-dropdown/llms.txt

This snippet showcases the advanced configuration of the angular2-multiselect-dropdown component. It covers various settings like single/multi-selection, search, filtering, event handling, and custom styling. The component binds to data, selected items, and settings, and handles user interactions through event emitters. Dependencies include Angular core modules and the DropdownSettings interface.

```typescript
import { Component, OnInit } from '@angular/core';
import { DropdownSettings } from 'angular2-multiselect-dropdown';

@Component({
  selector: 'app-advanced-config',
  template: `
    <angular2-multiselect
      [data]="itemList"
      [(ngModel)]="selectedItems"
      [settings]="settings"
      [loading]="isLoading"
      (onSelect)="onItemSelect($event)"
      (onDeSelect)="OnItemDeSelect($event)"
      (onSelectAll)="onSelectAll($event)"
      (onDeSelectAll)="onDeSelectAll($event)"
      (onOpen)="onOpen($event)"
      (onClose)="onClose($event)"
      (onScrollToEnd)="onScrollToEnd($event)"
      (onFilterSelectAll)="onFilterSelectAll($event)"
      (onFilterDeSelectAll)="onFilterDeSelectAll($event)"
      (onAddFilterNewItem)="onAddFilterNewItem($event)">
    </angular2-multiselect>

    <button (click)="clearSelection()">Clear All</button>
  `
})
export class AdvancedConfigComponent implements OnInit {
  itemList = [];
  selectedItems = [];
  settings: DropdownSettings = {};
  isLoading = false;

  ngOnInit() {
    this.itemList = [
      {"id": 1, "itemName": "Item 1", "disabled": false},
      {"id": 2, "itemName": "Item 2", "disabled": false},
      {"id": 3, "itemName": "Item 3", "disabled": true},  // Disabled item
      {"id": 4, "itemName": "Item 4", "disabled": false}
    ];

    this.selectedItems = [];

    this.settings = {
      singleSelection: false,           // Multi-select mode
      text: "Select Items",             // Placeholder text
      enableCheckAll: true,             // Show select all checkbox
      selectAllText: 'Select All',      // Select all button text
      unSelectAllText: 'UnSelect All',  // Unselect all button text
      enableSearchFilter: true,         // Enable search functionality
      searchPlaceholderText: 'Search',  // Search input placeholder
      searchAutofocus: true,            // Auto-focus search on open
      searchBy: [],                     // Empty = search all properties
      enableFilterSelectAll: true,      // Select all filtered results option
      filterSelectAllText: 'Select all filtered',
      filterUnSelectAllText: 'Unselect all filtered',
      maxHeight: 300,                   // Max height in pixels
      badgeShowLimit: 3,                // Number of badges to show
      classes: 'custom-dropdown-class', // Custom CSS classes
      limitSelection: -1,               // -1 = no limit, n = max selections
      disabled: false,                  // Disable entire dropdown
      showCheckbox: true,               // Show/hide checkboxes
      noDataLabel: 'No Data Available', // Message when no data
      labelKey: 'itemName',             // Property for display text
      primaryKey: 'id',                 // Unique identifier property
      position: 'bottom',               // 'top' or 'bottom'
      autoPosition: true,               // Auto-detect best position
      escapeToClose: true,              // Close on ESC key
      clearAll: true,                   // Show clear all button
      addNewItemOnFilter: true,         // Add new item when not found
      addNewButtonText: 'Add',          // Add button text
      tagToBody: true                   // Append dropdown to body
    };
  }

  onItemSelect(item: any) {
    console.log('Selected:', item);
  }

  OnItemDeSelect(item: any) {
    console.log('Deselected:', item);
  }

  onSelectAll(items: any) {
    console.log('All selected:', items);
  }

  onDeSelectAll(items: any) {
    console.log('All deselected (empty array):', items);
  }

  onOpen(event: any) {
    console.log('Dropdown opened:', event);
  }

  onClose(event: any) {
    console.log('Dropdown closed:', event);
  }

  onScrollToEnd(event: any) {
    console.log('Scrolled to end:', event);
    // Load more data for infinite scroll
  }

  onFilterSelectAll(items: any) {
    console.log('All filtered items selected:', items);
  }

  onFilterDeSelectAll(items: any) {
    console.log('All filtered items deselected:', items);
  }

  onAddFilterNewItem(newItem: string) {
    console.log('Add new item:', newItem);
    const id = this.itemList.length + 1;
    this.itemList.push({"id": id, "itemName": newItem, "disabled": false});
  }

  clearSelection() {
    this.selectedItems = [];
  }
}

```

--------------------------------

### Selection Events

Source: https://github.com/cuppalabs/angular2-multiselect-dropdown/blob/master/projects/angular2-multiselect-dropdown-lib/README.md

Handles events related to item selection and deselection within the dropdown.

```APIDOC
## Selection Events

### Description
These events are triggered when items are selected or deselected in the multiselect dropdown.

### Events

- **`onSelect`**
  - **Description**: Returns the selected item on selection.
  - **Example**: `(onSelect)="onItemSelect($event)"`

- **`onDeSelect`**
  - **Description**: Returns the un-selected item on un-selecting.
  - **Example**: `(onDeSelect)="OnItemDeSelect($event)"`

- **`onSelectAll`**
  - **Description**: Returns the list of all selected items when 'Select All' is triggered.
  - **Example**: `(onSelectAll)="onSelectAll($event)"`

- **`onDeSelectAll`**
  - **Description**: Returns an empty array when 'Deselect All' is triggered.
  - **Example**: `(onDeSelectAll)="onDeSelectAll($event)"`
```

--------------------------------

### Angular Event Binding for Dropdown State and Scrolling

Source: https://github.com/cuppalabs/angular2-multiselect-dropdown/blob/master/README.md

This snippet illustrates event bindings for `onOpen`, `onClose`, and `onScrollToEnd`. `onOpen` and `onClose` are triggered when the dropdown's visibility changes, while `onScrollToEnd` is useful for lazy loading data when the user scrolls to the end of the list.

```html
<angular2-multiselect-dropdown
    [data]="dropdownData"
    [(ngModel)]="selectedItems"
    (onOpen)="onOpen($event)"
    (onClose)="onClose($event)"
    (onScrollToEnd)="fetchMore($event)">
</angular2-multiselect-dropdown>
```

--------------------------------

### Angular Event Binding for Filtered Item Actions

Source: https://github.com/cuppalabs/angular2-multiselect-dropdown/blob/master/README.md

This snippet covers events related to filtering and adding new items: `onAddFilterNewItem`, `onFilterSelectAll`, and `onFilterDeSelectAll`. These events are useful when the `addNewItemOnFilter` setting is enabled or when users interact with select-all functionality on filtered lists.

```html
<angular2-multiselect-dropdown
    [data]="dropdownData"
    [(ngModel)]="selectedItems"
    (onAddFilterNewItem)="onAddItem($event)"
    (onFilterSelectAll)="onFilterSelectAll($event)"
    (onFilterDeSelectAll)="onFilterDeSelectAll($event)">
</angular2-multiselect-dropdown>
```

--------------------------------

### Angular HTML Template for Multiselect Dropdown Usage

Source: https://github.com/cuppalabs/angular2-multiselect-dropdown/blob/master/projects/angular2-multiselect-dropdown-lib/README.md

This HTML snippet shows how to integrate the angular2-multiselect component into your Angular template. It binds the component's `data`, `settings`, and `selectedItems` properties, and listens for selection and deselection events.

```html
<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" 
    [settings]="dropdownSettings" 
    (onSelect)="onItemSelect($event)" 
    (onDeSelect)="OnItemDeSelect($event)"
    (onSelectAll)="onSelectAll($event)"
    (onDeSelectAll)="onDeSelectAll($event)"></angular2-multiselect>
```

--------------------------------

### Scrolling and Filtering Events

Source: https://github.com/cuppalabs/angular2-multiselect-dropdown/blob/master/projects/angular2-multiselect-dropdown-lib/README.md

Handles events related to scrolling to the end of the list and filtering actions.

```APIDOC
## Scrolling and Filtering Events

### Description
These events relate to user interaction with the scrollbar and filtering mechanisms within the dropdown.

### Events

- **`onScrollToEnd`**
  - **Description**: Callback event fired when the dropdown list is scrolled to the end. Typically used with virtual scrolling to load data dynamically.
  - **Example**: `(onScrollToEnd)="fetchMore($event)"`

- **`onAddFilterNewItem`**
  - **Description**: Callback event fired when the `Add` button is clicked, which appears when the `addNewItemOnFilter` setting is enabled.
  - **Example**: `(onAddFilterNewItem)="onAddItem($event)"`

- **`onFilterSelectAll`**
  - **Description**: Callback event fired when the list is filtered and all filtered items are selected via the 'select all filtered items' checkbox.
  - **Example**: `(onFilterSelectAll)="onFilterSelectAll($event)"`

- **`onFilterDeSelectAll`**
  - **Description**: Callback event fired when the list is filtered and all filtered items are deselected via the 'deselect all filtered items' checkbox.
  - **Example**: `(onFilterDeSelectAll)="onFilterDeSelectAll($event)"`
```

--------------------------------

### Angular Custom Item and Badge Templates for Multiselect Dropdown

Source: https://context7.com/cuppalabs/angular2-multiselect-dropdown/llms.txt

This snippet shows how to define custom templates for displaying items and selected badges in the angular2-multiselect dropdown. It utilizes Angular's template syntax to embed custom HTML and data binding for each item and badge, allowing for rich visual representations.

```typescript
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-custom-template',
  template: `
    <angular2-multiselect
      [data]="dropdownList"
      [(ngModel)]="selectedItems"
      [settings]="dropdownSettings">

      <!-- Custom template for dropdown items -->
      <c-item>
        <ng-template let-item="item">
          <div class="country-item">
            <img [src]="item.image" class="flag-icon" />
            <div class="country-info">
              <label class="country-name">{{ item.itemName }}</label>
              <small class="country-capital">Capital: {{ item.capital }}</small>
            </div>
          </div>
        </ng-template>
      </c-item>

      <!-- Custom template for selected item badges -->
      <c-badge>
        <ng-template let-item="item">
          <img [src]="item.image" class="badge-flag" />
          <label class="badge-label">{{ item.itemName }}</label>
        </ng-template>
      </c-badge>

    </angular2-multiselect>
  `,
  styles: [
    `.country-item { display: flex; align-items: center; padding: 5px; }
    .flag-icon { width: 30px; height: 20px; margin-right: 10px; border: 1px solid #ddd; }
    .country-info { display: flex; flex-direction: column; }
    .country-name { font-weight: bold; margin: 0; }
    .country-capital { color: #666; font-size: 12px; }
    .badge-flag { width: 16px; height: 12px; margin-right: 5px; }
    .badge-label { margin: 0; }
  `]
})
export class CustomTemplateComponent implements OnInit {
  dropdownList = [];
  selectedItems = [];
  dropdownSettings = {};

  ngOnInit() {
    this.dropdownList = [
      {
        "id": 1,
        "itemName": "India",
        "capital": "New Delhi",
        "image": "https://flagcdn.com/w20/in.png"
      },
      {
        "id": 2,
        "itemName": "USA",
        "capital": "Washington DC",
        "image": "https://flagcdn.com/w20/us.png"
      },
      {
        "id": 3,
        "itemName": "France",
        "capital": "Paris",
        "image": "https://flagcdn.com/w20/fr.png"
      }
    ];

    this.selectedItems = [];

    this.dropdownSettings = {
      text: "Select Countries",
      enableSearchFilter: true,
      badgeShowLimit: 2,
      tagToBody: true
    };
  }
}

```

--------------------------------

### Use Multiselect Dropdown in Angular Template

Source: https://context7.com/cuppalabs/angular2-multiselect-dropdown/llms.txt

Demonstrates the use of the Angular2 multiselect dropdown component in an HTML template. It binds the component's data and settings, and attaches event handlers for interaction. The template integrates the dropdown with the component's data and event handling logic.

```html
<angular2-multiselect
  [data]="dropdownList"
  [(ngModel)]="selectedItems"
  [settings]="dropdownSettings"
  (onSelect)="onItemSelect($event)"
  (onDeSelect)="OnItemDeSelect($event)"
  (onSelectAll)="onSelectAll($event)"
  (onDeSelectAll)="onDeSelectAll($event)">
</angular2-multiselect>
```

--------------------------------

### Reactive Forms Integration

Source: https://github.com/cuppalabs/angular2-multiselect-dropdown/blob/master/README.md

This section demonstrates integrating the angular2-multiselect-dropdown component with reactive Angular forms. It uses the 'formControlName' directive for binding to a form control and shows how to initialize the form group with validators. Ensure the form group and control are correctly defined in your component's TypeScript file.

```html
<form [formGroup]="userForm" novalidate style="border: 1px solid #ccc; padding: 10px;">
        <div class="form-group">
            <label for="name">Skills</label>
           <angular2-multiselect [data]="itemList" [(ngModel)]="selectedItems" 
                                  [settings]="settings" 
                                  (onSelect)="onItemSelect($event)"
                                  (onDeSelect)="OnItemDeSelect($event)" 
                                  (onSelectAll)="onSelectAll($event)" 
                                  (onDeSelectAll)="onDeSelectAll($event)" formControlName="skills">
            </angular2-multiselect>
        </div>
</form>
```

```javascript
userForm: FormGroup;
this.userForm = this.fb.group({
            name: '',
            email: ['', Validators.required],
            skills: [[], Validators.required]
        });


```

--------------------------------

### Angular Module Import for Multiselect Dropdown

Source: https://github.com/cuppalabs/angular2-multiselect-dropdown/blob/master/projects/angular2-multiselect-dropdown-lib/README.md

This code snippet demonstrates how to import the AngularMultiSelectModule and FormsModule into your application's main module (e.g., app.module.ts). FormsModule is required for ngModel to work with the component. Ensure this is done before using the multiselect dropdown.

```typescript
import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown';
import { FormsModule } from '@angular/forms';

@NgModule({
  // ...
  imports: [
    AngularMultiSelectModule,
    FormsModule
  ]
  // ...
})
```