Draghandler don´t work

[gatno]

The Draghandler don´t work. I can move the by clicking on the whole window. Here is my code:

<div ngDraggable [handle]="DragHandle" class="window" >
  <div #DragHandle class="header blue" *ngIf="title">
      <h3>{{ title }}</h3>
  </div>
  <div>
    <ul>
        <ng-content></ng-content>
    </ul>
  </div>
</div>

No errors in browser-console or at ng build. It´s angular cli 1.7.0 without any other packages

Here is the output code: https://i.imgur.com/UCZqehl.png

[ctrl-brk]

Could you provide a plunker? Same approach works for me with no problem.

[gatno]

Plunker is not easy for this issue. The Problem is only on nested components.

<app-login-gui></app-login-gui> Has the following Code:

<app-window>
...
</app-window>

And then in app-window there are the dragable methodes as showed on the first post.

[mkoty]

I have same problem. But in console I have error:

DbsvSelectedDatablocksContainerComponent.html:1 ERROR TypeError: Cannot read property 'add' of undefined at DefaultDomRenderer2.webpackJsonp.../../../platform-browser/esm5/platform-browser.js.DefaultDomRenderer2.addClass (platform-browser.js:2879) at BaseAnimationRenderer.webpackJsonp.../../../platform-browser/esm5/animations.js.BaseAnimationRenderer.addClass (animations.js:563) at DebugRenderer2.webpackJsonp.../../../core/esm5/core.js.DebugRenderer2.addClass (core.js:15027) at AngularDraggableDirective.webpackJsonp.../../../../angular2-draggable/angular2-draggable.es5.js.AngularDraggableDirective.ngOnInit (angular2-draggable.es5.js:130) at checkAndUpdateDirectiveInline (core.js:12095) at checkAndUpdateNodeInline (core.js:13598) at checkAndUpdateNode (core.js:13541) at debugCheckAndUpdateNode (core.js:14413) at debugCheckDirectivesFn (core.js:14354) at Object.eval [as updateDirectives] (DbsvSelectedDatablocksContainerComponent.html:1)

[mkoty]

It oddured in this case:

<mat-card ngDraggable
          class="selected-datablocks-card"
          [handle]="handleByHeader">

  <mat-card-header #handleByHeader
                                  class="selected-datablocks-header">
    <mat-card-title >Selected datablocks</mat-card-title>
  </mat-card-header>

  <mat-card-content class="selected-datablocks-container">

  </mat-card-content>
</mat-card>

But everything work then:

<mat-card ngDraggable
          class="selected-datablocks-card"
          [handle]="handleByHeader">

  <mat-card-header class="selected-datablocks-header">
    <mat-card-title #handleByHeader>Selected datablocks</mat-card-title>
  </mat-card-header>

  <mat-card-content class="selected-datablocks-container">

  </mat-card-content>
</mat-card>

[jcjobin]

It oddured in this case:

<mat-card ngDraggable
          class="selected-datablocks-card"
          [handle]="handleByHeader">

  <mat-card-header #handleByHeader
                                  class="selected-datablocks-header">
    <mat-card-title >Selected datablocks</mat-card-title>
  </mat-card-header>

  <mat-card-content class="selected-datablocks-container">

  </mat-card-content>
</mat-card>

But everything work then:

<mat-card ngDraggable
          class="selected-datablocks-card"
          [handle]="handleByHeader">

  <mat-card-header class="selected-datablocks-header">
    <mat-card-title #handleByHeader>Selected datablocks</mat-card-title>
  </mat-card-header>

  <mat-card-content class="selected-datablocks-container">

  </mat-card-content>
</mat-card>

I am having the same result as this, have you found a solution? I can make it so that my header title is the handler, but not the header itself.

EDIT: I actually moved it back and got it to work as follows:

<div ngDraggable [handle]="DemoHandle" class="modal-draggable">
    <div #DemoHandle class="modal-header">
      <h5 class="modal-title">Edit Homepage</h5>
      <button type="button" class="close" (click)="closeModal()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
</div>