CdkDrop should be a Directive rather than a Component

[josephperrott]

By using a directive rather than a component, the drop area can be easily added on to templating which is controlled by another component.

An example of would be in the MatTable/CdkTable:

Currently you must do the following for each column:

<ng-container cdkColumnDef="position">
  <th cdk-header-cell *cdkHeaderCellDef>
    <cdk-drop [connectedTo]="drops">
      <span cdkDrag>No.</span>
    </cdk-drop>
  </th>
  <td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
</ng-container>

coupled with something in your components class to determine all of the drop zones.

@ViewChildren(CdkDrop) dropChildren: QueryList<CdkDrop>;
drops: CdkDrop[] = [];
ngAfterInit() {
  this.dropChildren.changes.subscribe(() => {
    this.drops = this.dropsChildren.toArray();
  });
  // Simple hack for quick example
  Promise.resolve().then(() => {
    this.drops = this.dropsChildren.toArray();
  });
}

By moving to using directives we can have the following:

<ng-container cdkColumnDef="position">
  <th cdk-header-cell *cdkHeaderCellDef cdkDrag>No.</th>
  <td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
</ng-container>

<tr cdk-header-row *cdkHeaderRowDef="displayedColumns" cdkDrop></tr>

[crisbeto]

@josephperrott now I remember the primary reason why I made it a component, instead of a directive: we need a small set of structural styles for the dragging to work correctly. I made it a component so we can have those styles be included automatically together with the component.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}