### File

`projects/ngui-common/src/lib/ngui-list/src/ngui-list-item.directive.ts`

### Implements

`OnInit`

### Metadata

selector | `ngui-list-item`

### Index

###### Properties
nextSibling parentListComp prevSibling
###### Methods
ngOnInit
###### Inputs
item
###### HostListeners
blur click focus keydown keyup

### Constructor

`constructor(el: ElementRef, renderer: Renderer2, viewContainer: ViewContainerRef, listDirective: NguiListDirective, virtualListComponent: NguiVirtualListComponent, autocompleteComponent: NguiAutocompleteComponent)`
Defined in projects/ngui-common/src/lib/ngui-list/src/ngui-list-item.directive.ts:28
Parameters :
Name | Type | Optional
el | `ElementRef` | no
renderer | `Renderer2` | no
viewContainer | `ViewContainerRef` | no
listDirective | `NguiListDirective` | no
virtualListComponent | `NguiVirtualListComponent` | no
autocompleteComponent | `NguiAutocompleteComponent` | no

### Inputs

`item` | Type: `any`
Defined in projects/ngui-common/src/lib/ngui-list/src/ngui-list-item.directive.ts:24

### HostListeners

blur
Arguments : `'$event'`
`blur()`
Defined in projects/ngui-common/src/lib/ngui-list/src/ngui-list-item.directive.ts:98

click
Arguments : `'$event'`
`click()`
Defined in projects/ngui-common/src/lib/ngui-list/src/ngui-list-item.directive.ts:88

focus
Arguments : `'$event'`
`focus()`
Defined in projects/ngui-common/src/lib/ngui-list/src/ngui-list-item.directive.ts:92

keydown
Arguments : `'$event'`
`keydown(event: )`
Defined in projects/ngui-common/src/lib/ngui-list/src/ngui-list-item.directive.ts:52

keyup
Arguments : `'$event'`
`keyup(event: )`
Defined in projects/ngui-common/src/lib/ngui-list/src/ngui-list-item.directive.ts:75

### Methods

ngOnInit
`ngOnInit()`
Defined in projects/ngui-common/src/lib/ngui-list/src/ngui-list-item.directive.ts:39
Returns : `void`

### Properties

nextSibling
`nextSibling: `HTMLElement``
Type : `HTMLElement`
Defined in projects/ngui-common/src/lib/ngui-list/src/ngui-list-item.directive.ts:26

parentListComp
`parentListComp: `NguiListDirective | NguiVirtualListComponent | NguiAutocompleteComponent``
Type : `NguiListDirective | NguiVirtualListComponent | NguiAutocompleteComponent`
Defined in projects/ngui-common/src/lib/ngui-list/src/ngui-list-item.directive.ts:28

prevSibling
`prevSibling: `HTMLElement``
Type : `HTMLElement`
Defined in projects/ngui-common/src/lib/ngui-list/src/ngui-list-item.directive.ts:27

    import {
      Directive,
      ElementRef,
      Host,
      HostListener,
      Input,
      OnInit,
      Optional,
      Renderer2,
      ViewContainerRef
    } from '@angular/core';

    import { NguiListDirective } from './ngui-list.directive';
    import { NguiVirtualListComponent } from './ngui-virtual-list.component';
    import { NguiAutocompleteComponent } from './ngui-autocomplete.component';
    import { NoneSelect } from './none-select';
    import { NoMatchFound } from './no-match-found';

    // tabindex, keydown, keyup(ENTER, ESC), click
    @Directive({
      selector: 'ngui-list-item' // tslint:disable-line
    })
    export class NguiListItemDirective implements OnInit {
      @Input('item') object: any; // tslint:disable-line

      nextSibling: HTMLElement;
      prevSibling: HTMLElement;
      parentListComp: NguiListDirective | NguiVirtualListComponent | NguiAutocompleteComponent;

      constructor(
        private el: ElementRef,
        private renderer: Renderer2,
        private viewContainer: ViewContainerRef,
        @Optional() @Host() private listDirective: NguiListDirective,
        @Optional() @Host() private virtualListComponent: NguiVirtualListComponent,
        @Optional() @Host() private autocompleteComponent: NguiAutocompleteComponent
      ) { }

      ngOnInit(): void {
        this.renderer.setAttribute(this.el.nativeElement, 'tabindex', '0');
        this.parentListComp = this.listDirective || this.virtualListComponent || this.autocompleteComponent;
        if (!this.parentListComp) {
          throw Error('ngui-list-item requires parent of ngui-list, ngui-virtual-list, or ngui-autocomplete.');
        }
        if ((this.object instanceof NoneSelect) || (this.object instanceof NoMatchFound)) {
          this.viewContainer.clear();
          this.el.nativeElement.innerHTML = this.object.html;
        }
      }

      // handles keyboard up, down, left, right
      @HostListener('keydown', ['$event']) keydown(event): void {
        const thisListItem = this.el.nativeElement;
        const keyCode = event.which || event.keyCode;
        const parentListEl = this.parentListComp.element.nativeElement;
        const listItems: Array<HTMLElement>
          = Array.from(parentListEl.querySelectorAll('ngui-list-item'));
        const listItemNdx = listItems.indexOf(thisListItem);
        const nextListItem = listItems[listItemNdx + 1] || listItems[0];
        const prevListItem = listItems[listItemNdx - 1] || listItems[listItems.length - 1];

        switch (keyCode) {
          case 37: case 38: // up arrow, left arrow
            prevListItem.focus();
            break;
          case 39: case 40: // down arrow, right arrow
            nextListItem.focus();
            break;
          default:
            break;
        }
      }

      // handles keyboard enter(13), esc(27)
      @HostListener('keyup', ['$event']) keyup(event): void {
        switch (event.key) {
          case 'Enter':
            this.parentListComp.selected.emit(this.object);
            break;
          case 'Escape':
            this.parentListComp.escaped.emit();
            break;
          default:
            break;
        }
      }

      @HostListener('click', ['$event']) mousedown(): void {
        this.parentListComp.selected.emit(this.object);
      }

      @HostListener('focus', ['$event']) focused(): void {
        if (this.parentListComp['setFocused']) {
          this.parentListComp['setFocused']('listItem', true);
        }
      }

      @HostListener('blur', ['$event']) blurred(): void {
        if (this.parentListComp['setFocused']) {
          this.parentListComp['setFocused']('listItem', false);
        }
      }
    }

# results matching ""

# No results matching ""