Can't hide drag-handle icon

[amperboy]

I can't hide drag-handle icon when using *ngIf

The querySelector will not find an element with dragHandle Class: https://github.com/ObaidUrRehman/ng2-drag-drop/blob/968ebbac52747c73b54f21bf09eea48322670e10/src/directives/draggable.directive.ts#L210

"ng2-drag-drop": "^2.9.2",

dragElement will be null here: https://github.com/ObaidUrRehman/ng2-drag-drop/blob/968ebbac52747c73b54f21bf09eea48322670e10/src/directives/draggable.directive.ts#L199

Stacktrace:
ERROR TypeError: Cannot read property 'classList' of null
    at Function.webpackJsonp.../../../../ng2-drag-drop/src/shared/dom-helper.js.DomHelper.getElementWithValidClassList (dom-helper.js:62)
    at Function.webpackJsonp.../../../../ng2-drag-drop/src/shared/dom-helper.js.DomHelper.addClass (dom-helper.js:38)
    at Draggable.webpackJsonp.../../../../ng2-drag-drop/src/directives/draggable.directive.js.Draggable.applyDragHandleClass (draggable.directive.js:148)
    at Draggable.set [as dragEnabled] (draggable.directive.js:78)
    at updateProp (core.es5.js:11122)
    at checkAndUpdateDirectiveInline (core.es5.js:10822)
    at checkAndUpdateNodeInline (core.es5.js:12364)
    at checkAndUpdateNode (core.es5.js:12303)
    at debugCheckAndUpdateNode (core.es5.js:13167)
    at debugCheckDirectivesFn (core.es5.js:13108)

Example:

<div draggable [dragEnabled]="isMoveable" [dragData]="{data: data}" [dragHandle]="'.drag-handle'">
    <div>someOtherStuff</div>
    <div *ngIf="isMoveable">
        <mat-icon class="drag-handle md-24" aria-label="Move Card">open_with</mat-icon>
    </div>
    <div>someOtherStuff</div>
</div>

[ObaidUrRehman]

@amperboy you are hiding the drag handle element instead of using the dragEnabled property on the draggable element. Setting this property sets/removes the drag handle cursor on the drag element.

Anyway, this is a bug and needs to be fixed. It shouldn't throw an error if the element is not found.

[amperboy]

@ObaidUrRehman I also use dragEnabled Attribute to disable the dragability. But my stakeholder also want to hide the icon when dragging a component is disabled. As workaround I'm using the [hidden] directive.

[ObaidUrRehman]

Ok, I understand your use case. Will fix

On Thu, Oct 12, 2017 at 11:50 AM, Marco notifications@github.com wrote:

@ObaidUrRehman https://github.com/obaidurrehman I also use dragEnabled Attribute to disable the dragability. But my stakeholder also want to hide the icon when dragging a component is disabled. As workaround I'm using the [hidden] directive.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ObaidUrRehman/ng2-drag-drop/issues/100#issuecomment-336037075, or mute the thread https://github.com/notifications/unsubscribe-auth/ABplrButQ2I08Ija6Ox-cMgIiMc7iyJjks5srbbDgaJpZM4P18z0 .

[ObaidUrRehman]

Fixed in v3.0.1