Kendo UI for Angular 2 Access component from directive

4 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    4 posts
    Member since:
    Aug 2012

    Posted 27 Mar Link to this post

    Hello,

    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 am using it as:

    <kendo-dropdownlist [data]="statuses"
                                    [(value)]="value"
                                    [valuePrimitive]="true"
                                    [textField]="'name'"
                                    [valueField]="'id'"
                                    (valueChange)="statusChanged()"
                                    [trackInputChanges]="'some data'" >
                </kendo-dropdownlist>

     

    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).kendo('kendoDropDownList')

     

    to get a reference to the widget.

    Is there something similar available in this version?

    Thank you.

  2. Jonathan
    Jonathan avatar
    4 posts
    Member since:
    Aug 2012

    Posted 27 Mar Link to this post

    Sorry,  As I was creating the thread, I typed the wrong html code.  The definition of the drop down box should read:

    <kendo-dropdownlist [data]="statuses"
                                    [(value)]="value"
                                    [valuePrimitive]="true"
                                    [textField]="'name'"
                                    [valueField]="'id'"
                                    (valueChange)="statusChanged()"
                                    [trackDDLChanges]="'some data'">
                </kendo-dropdownlist>
  3. Jonathan
    Jonathan avatar
    4 posts
    Member since:
    Aug 2012

    Posted 28 Mar Link to this post

    This was answered by George K on SO:  http://stackoverflow.com/questions/43051039/kendo-ui-for-angular-2-access-component-from-directive
  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    628 posts

    Posted 29 Mar Link to this post

    Hi Jonathan,

    Thank you for sharing the solutions, so all community members can benefit. Do not hesitate to contact us again if you have other questions.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top