JackuiMultiSelect Component

This project contains an Angular JackuiMultiSelect that allows users to select multiple items from a dropdown list. It is designed to be flexible and integrate seamlessly with both template-driven and reactive forms.

Purpose

The JackuiMultiSelect provides a reusable UI element for scenarios where users need to select one or more options from a predefined list. It handles selection logic, displays selected items, and integrates with Angular's form system.

Installation

This component is part of this Angular project. To use it in your application, ensure it's imported into the module or standalone component where it's being used.

// In your component or module
import { JackuiMultiSelect } from '@jack-ui/jackui-multi-select';

@Component({
  // ...
  standalone: true,
  imports: [JackuiMultiSelect],
  // ...
})
export class YourComponent {
  // ...
}

Dependencies

• @angular/core
• @angular/forms
• clsx (for conditional CSS class names)

Inputs

The JackuiMultiSelect accepts the following inputs:

| Name | Type | Default | Description | | :----------------- | :-------------------- | :---------------- | :----------------------------------------------------------------------- | | items | MultiSelectItem[] \| null \| undefined | undefined | The array of items to display in the dropdown. Each item must have an id (number) and name (string). If null or undefined, the component will be disabled and display "No value". | | placeholder | string | 'Select items...' | The text shown when no items are selected. | | variant | 'default' \| 'outline' \| 'secondary' \| 'destructive' | 'default' | The visual style of the select button. | | position | 'top' \| 'bottom' | 'bottom' | The position of the dropdown relative to the select button. | | closeOnSelect | boolean | true | If true, the dropdown closes after an item is selected or unselected. | | maxDisplaySelected | number | 2 | The maximum number of selected item values to display before showing a summary (e.g., "3 items selected"). |

| disabled | boolean | false | If true, the multi-select component will be disabled. |

MultiSelectItem Interface

export interface MultiSelectItem {
  id: number;
  name: string;
}

Outputs

The component does not have explicit @Output() events. It integrates with Angular forms using ControlValueAccessor to emit changes via ngModel or formControl.

Usage Examples

Template-Driven Forms

<form #multiSelectForm="ngForm">
  <jui-multi-select
    name="myItems"
    [(ngModel)]="selectedItemsTemplate"
    [items]="availableItems"
    placeholder="Choose your items"
    [closeOnSelect]="false"
  ></app-multi-select>
  <p>Selected in Template-Driven: {{ selectedItemsTemplate | json }}</p>
</form>

// In your component.ts
import { Component } from '@angular/core';
import { JackuiMultiSelect, MultiSelectItem } from '@jack-ui/jackui-multi-select';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule, JackuiMultiSelect],
  templateUrl: './app.html',
  styleUrls: ['./app.css'],
})
export class AppComponent {
  availableItems: MultiSelectItem[] = [
    { id: 1, name: 'Option A' },
    { id: 2, name: 'Option B' },
    { id: 3, name: 'Option C' },
    { id: 4, name: 'Option D' },
  ];
}

Reactive Forms

<form [formGroup]="multiSelectReactiveForm">
  <jui-multi-select
    formControlName="reactiveItems"
    [items]="availableItems"
    placeholder="Select items (Reactive)"
    variant="filled"
  ></app-multi-select>
  <p>Selected in Reactive Forms: {{ multiSelectReactiveForm.get('reactiveItems')?.value | json }}</p>
</form>

// In your component.ts
import { Component, OnInit } from '@angular/core';
import { JackuiMultiSelect, MultiSelectItem } from '@jack-ui/jackui-multi-select';
import { CommonModule } from '@angular/common';
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, JackuiMultiSelect],
  templateUrl: './app.html',
  styleUrls: ['./app.css'],
})
export class AppComponent implements OnInit {
  availableItems: MultiSelectItem[] = [
    { id: 1, name: 'Option A' },
    { id: 2, name: 'Option B' },
    { id: 3, name: 'Option C' },
    { id: 4, name: 'Option D' },
  ];

  multiSelectReactiveForm!: FormGroup;

  ngOnInit(): void {
    this.multiSelectReactiveForm = new FormGroup({
      reactiveItems: new FormControl<MultiSelectItem[]>([
        { id: 1, name: 'Option A' },
      ]),
    });
  }
}

Handling null or undefined Items

If the items input is null or undefined, the multi-select component will be disabled and will display "No value". This is useful for scenarios where the item list is loaded asynchronously.

<jui-multi-select [items]="null"></app-multi-select>

This will render a disabled select input with the text "No value".

Error State

To indicate an error, you can use the error variant. This will apply a red border to the component.

<jui-multi-select
  [items]="availableItems"
  variant="error"
  placeholder="This field has an error"
></app-multi-select>

Dropdown Position

You can control the dropdown's opening direction using the position input. By default, it opens to the bottom.

<jui-multi-select
  [items]="availableItems"
  position="top"
  placeholder="Dropdown opens upwards"
></app-multi-select>