Member Junction
    Preparing search index...

    Class MJDropdownComponent

    mj-dropdown — Dropdown select component using CDK Overlay.

    Replaces <kendo-dropdownlist>.

    Every dropdown needs an ACCESSIBLE NAME, or it announces as "combobox, collapsed" with no hint of what it selects (WCAG 2.1 4.1.2). Use AriaLabelledBy when a visible label already exists — <label for> cannot name a div[role=combobox] — and AriaLabel when none does.

    <span id="persona-label">Interview persona</span>
    <mj-dropdown
      AriaLabelledBy="persona-label"
      [Data]="items"
      TextField="name"
      ValueField="id"
      [(ngModel)]="selectedId"
      [ValuePrimitive]="true">
    </mj-dropdown>

    <mj-dropdown
      AriaLabel="Interview persona"
      [Data]="items"
      TextField="name"
      ValueField="id"
      [(ngModel)]="selectedId"
      [ValuePrimitive]="true"
      [Filterable]="true"
      (FilterChange)="onFilter($event)">
    </mj-dropdown>

    Implements

    • ControlValueAccessor
    • OnDestroy
    Index

    Constructors

    constructor

    Properties

    AriaDescribedBy AriaLabel AriaLabelledBy Data DefaultItem DropdownId Filterable FilterChange filterText HighlightedIndex hostClass InputId IsDisabled IsOpen itemTemplate Placeholder Positions SelectedValue TextField TriggerWidth ValueChange ValueField ValuePrimitive

    Accessors

    Disabled DisplayText FilteredItems FilterLabel FilterLabelledBy FilterWordId HasValue ListboxId

    Methods

    Close GetItemText GetItemValue IsItemSelected ngOnDestroy OnBlur OnFilterInput OnKeyDown Open registerOnChange registerOnTouched SelectItem setDisabledState Toggle TrackByIndex writeValue

    Constructors

    Properties

    AriaDescribedBy: string = ''

    aria-describedby passthrough for hint/error text — same shape of gap as the name.

    AriaLabel: string = ''

    Accessible name for the combobox (#3860). Without one — and with no visible label wired via AriaLabelledBy — the control announces as an UNNAMED combobox, which fails WCAG 2.1 4.1.2 (Name, Role, Value): "combobox, collapsed" with no hint of what it selects. Applied as aria-label on the trigger AND on the popup listbox, so both halves announce the same name.

    AriaLabelledBy: string = ''

    The id of a VISIBLE label element that names this control — the preferred wiring when a label already exists on screen (an aria-label would duplicate its text and drift on rename). This, not <label for>, is the visible-label path: the trigger is a div[role=combobox], and the label-for association only names labelable form elements. aria-labelledby beats AriaLabel in the accessible-name computation where both are present. Applied to trigger AND listbox.

    Data: string[] | Record<string, unknown>[] | readonly unknown[] | null = []
    DefaultItem: string | Record<string, unknown> | null = null
    DropdownId: number = ...
    Filterable: boolean = false
    FilterChange: EventEmitter<string> = ...
    filterText: string = ''
    HighlightedIndex: number = -1
    hostClass: true
    InputId: string = ''

    id for the combobox trigger, so other markup can REFERENCE it — aria-controls, hint text, test hooks. It is deliberately not documented as a <label for> target: the trigger is a div, which label[for] neither names nor focuses. To name the control from a visible label, put an id on the LABEL and pass it as AriaLabelledBy.

    IsDisabled: boolean = false

    The single gate on Toggle() / Open() — true when EITHER the Disabled input or Angular Forms says so. Never assign it directly; go through syncDisabled() so both sources are always composed and a lock closes an open panel.

    IsOpen: boolean = false
    itemTemplate: TemplateRef<{ $implicit: unknown }> | null = null
    Placeholder: string = 'Select...'
    Positions: ConnectedPosition[] = ...
    SelectedValue: unknown = null
    TextField: string = ''
    TriggerWidth: number = 0
    ValueChange: EventEmitter<unknown> = ...
    ValueField: string = ''
    ValuePrimitive: boolean = false

    Accessors

    • get FilterLabel(): string

      aria-label for the filter box in the no-visible-label case.

      The "filter" guard is not cosmetic: this repo's house habit is AriaLabel="Filter roles", and an unconditional prefix announces that box as "Filter Filter roles". A name that already begins with the word is used as-is.

      Returns string

    • get ListboxId(): string

      Id of the popup listbox, so the trigger can point aria-controls at it while open — the half of the combobox pattern that makes "collapsed/expanded" refer to something a screen reader can find. Generated per instance from the same static nextId counter dialog, window and accordion use in this package.

      Returns string

    Methods

    • Parameters

      • fn: (value: unknown) => void

        The callback function to register

      Returns void

      Registers a callback function that is called when the control's value changes in the UI.

      This method is called by the forms API on initialization to update the form model when values propagate from the view to the model.

      When implementing the registerOnChange method in your own value accessor, save the given function so your class calls it at the appropriate time.

      The following example stores the provided function as an internal method.

      registerOnChange(fn: (_: any) => void): void {
        this._onChange = fn;
      }

      When the value changes in the UI, call the registered function to allow the forms API to update itself:

      host: {
         '(change)': '_onChange($event.target.value)'
      }

    • Parameters

      • fn: () => void

        The callback function to register

      Returns void

      Registers a callback function that is called by the forms API on initialization to update the form model on blur.

      When implementing registerOnTouched in your own value accessor, save the given function so your class calls it when the control should be considered blurred or "touched".

      The following example stores the provided function as an internal method.

      registerOnTouched(fn: any): void {
        this._onTouched = fn;
      }

      On blur (or equivalent), your class should call the registered function to allow the forms API to update itself:

      host: {
         '(blur)': '_onTouched()'
      }

    • Parameters

      • isDisabled: boolean

        The disabled status to set on the element

      Returns void

      Function that is called by the forms API when the control status changes to or from 'DISABLED'. Depending on the status, it enables or disables the appropriate DOM element.

      The following is an example of writing the disabled property to a native DOM element:

      setDisabledState(isDisabled: boolean): void {
        this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
      }

    • Parameters

      • value: unknown

      Returns void

      Writes a new value to the element.

      This method is called by the forms API to write to the view when programmatic changes from model to view are requested.

      The following example writes a value to the native DOM element.

      writeValue(value: any): void {
        this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
      }

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods