Directive · v2.7.0

NgbDndListDirective

NgbDndListDirective directive exported by the ngbootstrap package API.

Import

import { NgbDndListDirective } from '@angular-bootstrap/ngbootstrap';

Selector:[ngbDndList]

Declaration

class NgbDndListDirective<T = unknown>

Inputs

`dndChildrenKey`

dndChildrenKey: string | null

Default:'children'

`ngbDndList`

Bind your array here: <div [ngbDndList]="items">

list: T[]

`dndGroup`

Optional: group barrier across lists

dndGroup?: string

`dndDisabled`

Disable this list

dndDisabled: boolean

Default:false

`dndCloneOnDrop`

NEW: clone if source wasn't a list (e.g. palette)

dndCloneOnDrop: boolean

Default:false

`dndCloneFn`

NEW: custom clone function

dndCloneFn?: (item: T) => T

`dndIsPalette`

dndIsPalette: boolean

Default:false

`dndCanDrop`

dndCanDrop: boolean | DndCanDropFn<T>

Default:true

`dndAriaLabel`

dndAriaLabel?: string

`dndRole`

dndRole: string

Default:'list'

Outputs

`dndDropped`

Fires after item is inserted

dndDropped: EventEmitter<NgbDndDropEvent<T>>

Properties

`denied`

get denied(): boolean

`ariaLabel`

get ariaLabel(): string | null

`role`

get role(): string
set role(value: string)

`hostClass`

hostClass: boolean

Default:true

`isOver`

get isOver(): boolean

`dataDropValid`

get dataDropValid(): "true" | "false" | null

Methods

`onDragEnter`

onDragEnter(ev: DragEvent): void

`onDragOver`

onDragOver(ev: DragEvent): void

`onDragLeave`

onDragLeave(ev: DragEvent): void

`onDocumentDrop`

onDocumentDrop(ev: DragEvent): void

`onDrop`

onDrop(ev: DragEvent): void

`onDocumentDragFinished`

onDocumentDragFinished(): void

`emitDropEvent`

emitDropEvent(event: NgbDndDropEvent<T>): void

Referenced types

Source: src/drag-drop/src/directive/dnd-list.directive.ts in the installed @angular-bootstrap/ngbootstrap package. Angular compiler metadata and private members are omitted.