CODEWITHSUNDEEP
kendo-ui-angular2
dpdragnev
dpdragnev

Reputation: 2111

Kendo UI for Angular 2 Access component from directive

I am trying to create a custom directive that will be placed in a DropDownList component. In the constructor of the directive I would like to get a reference of the host DropDownList component.

Here is my code:

import { Directive, ElementRef } from '@angular/core';
import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';

@Directive({
	selector: '[trackDDLChanges]'
})
export class TrackDDLChangesDirective {
	ddl: DropDownListComponent;

	constructor(elem: ElementRef) {
		this.ddl = elem.nativeElement; <-- how to get the reference of the component?
		
	}
}

I could not find anything in the documentation. ElementRef gives me the html element, but I cannot find a way to convert it into the corresponding component.

In the previous version of kendo we could do:

$(elem).data('kendoDropDownList')

to get a reference to the widget.

Is there something similar available in this version?

Thank you.

Upvotes: 2

Views: 1934

Answers (1)

George K
George K

Reputation: 1763

Angular DI will inject the component instance, if the proper type is defined:

@Directive({
  selector: '[custom-behavior]'
})
export class CustomDirective {
  constructor(ddl: DropDownListComponent) {
    console.log('test', ddl);
  }
}

http://plnkr.co/edit/V5jJASqJ7NxToXIerp5z?p=preview

Upvotes: 3

Related Questions