Building a custom sorting component in Angular2, but I'm having trouble accessing a template variable. I need to be able to access the ng-template
so that I can "clone/stamp" then element to create drop zones, based on the template provided.
I've tried using @ViewChild("dropzone")
, but it also returns an empty comment node.
Here's the Component
@Component({
selector: "my-sortable",
template: `
<ng-content select="my-sortable-content"></ng-content>
`
})
export class SortableComponent implements AfterViewInit {
@Input() //@ContentChild("dropzone")
dzTemplate: any;
onAfterViewInit() {
// Outputs an object but the
// nativeElement is an empty
// comment node
console.log(this.dzTemplate);
}
}
And here's the 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>
Found the solution. Turns out that the ElementRef
object has the method createEmbeddedView()
which will return a EmbeddedViewRef
. From there, I can access the DOM elements in the rootNodes property. These nodes are not attached to any element yet, so they're perfect for cloning/stamping.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With