angularjquery-pluginsjquery-nestable

Angular 4 does not let me use data attributes

I am trying to use jQuery Nestable library and I have to set data-id and data-weight to my list elements. Here is the required list schema:

<div class="dd" id="nestable">
        <ol class="dd-list">
            <li class="dd-item" data-id="10" data-weight="1">
                <div class="dd-handle">Item 1</div>
            </li>
            <li class="dd-item" data-id="29" data-weight="2">
                <div class="dd-handle">Item 2</div>
            </li>
            <li class="dd-item" data-id="58" data-weight="3">
                <div class="dd-handle">Item 11</div>
            </li>
        </ol>
    </div>

However, everytime I try to assign an attribute to an element, I get the below error:

Can't bind to 'weight' since it isn't a known property of 'li'.

This is my nestable.directive.ts:

@Directive({ selector: '[uiNestable]' })
export class NestableDirective {
    constructor(el: ElementRef) {
        $(el.nativeElement).nestable({
            group: 1
        });
    }
}

Any help is appreciated.

Solution

  • Try binding to the data-weight property using the attr binding syntax. This can be done like so:

    <li class="dd-item" data-id="10" [attr.data-weight]="1">
    <div class="dd-handle">Item 1</div>
</li>

    Demo