Extending Kendo Angular 2 UI component and creating our own component wrapper with all Kendo component capabilities

Question

I want to create one Angular 2 component which can wrap kendo-component with some other component.

Something like below my-Component.component.html

 <div class="my-component-wrapper"><br />
      <label>{{label}}<br />
        <mytooltipComp></mytooltipComp><br />
      </label><br />
    <kendo-dropdownlist<br />
        [data]="data"<br />
        [defaultItem]="defaultItem"<br />
        [textField]="'text'"<br />
        [valueField]="'value'"<br />
        [valuePrimitive]="true"<br />
        (ngModelChange)="updateData($event)"<br />
        (selectionChange)="handleSelection($event)"><br />
    </kendo-dropdownlist><br />   
   <div *ngIf="_dropdownControl.valid == false || this.value==null"><br />
        <p *ngIf="errorMsgShow">{{errorMsg}}</p><br />
      </div><br />
    </div><br />      

My wrapper.ts file has below component directive.

@Component({
   selector: 'my-Component',        
   templateUrl: './my-Component.component.html'
})        

Now to use kendo component property I need to re-define same in my wrapper.ts file e.g. @Input('data') data: any;

to use my warped component I need following code

<my-Component
               [data]="genders"
               [label]="'mylable'"
               [isValidate]=true
               [showError]=true>
</my-Component>

My question is

As [data] is already property of kendo I don't want to re-define in wrapper.ts .

Also wrapping of existing kendo component not allowing me to set other kendo related property like filtering etc. for that I need to again define same in wrapper.ts component.

Is there any way I can use full capability of kendo inside my wrapper?

Answer 1

Once you decide to embed a kendo component in a wrapper, you isolate the kendo component from your page template, so you have no other choice than transfering properties through your wrapper.

If your data comes from outside the wrapper you will need to define an @Input() data in your wrapper. But you could also query an API to fill your data, and this can be done inside the wrapper.

Also, check out CustomValueAccessor, it is something you will need to implement in your custom control if you want it to integrate with Angular Forms and manage ngModel.

You can also benefit from inheritance, by creating a base dropdown component (which will do the ControlValueAccessor implementation and manage the base logic), and extending it for every type of dropdown you need.