Struggling to create a custom sorting component in Angular2 because I'm unable to access a template variable. It's crucial for me to be able to reach the ng-template so that I can duplicate/stamp the element to generate drop zones based on the provided template.
I attempted using @ViewChild("dropzone"), but it just returns an empty comment node.
This is what the Component looks like:
@Component({
selector: "my-sortable",
template: `
<ng-content select="my-sortable-content"></ng-content>
`
})
export class SortableComponent implements AfterViewInit {
@Input() //@ContentChild("dropzone")
dzTemplate: any;
onAfterViewInit() {
// Returns an object but the
// nativeElement is an empty
// comment node
console.log(this.dzTemplate);
}
}
And this is the corresponding HTML:
<my-sortable [dzTemplate]="dropzone">
<ng-template #dropzone>
<p>Hey, I'm a drop zone!!</p>
</ng-template>
<my-sortable-content>
<div *ngFor="...">
...
</div>
</my-sortable-content>
</my-sortable>