This is a migrated thread and some comments may be shown as answers.

Templates as directives instead of content

1 Answer 60 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Tomer
Top achievements
Rank 1
Veteran
Tomer asked on 30 Jul 2020, 11:23 AM

I'm not sure this can or should be done. I'll try to explain as best as I can.

 

I have a lot of AutoComplete controls. I want to give all of them the same NoDataTemplate. I know how to implement that by adding an ng-template with the kendoAutoCompleteNoDataTemplate. But I don't want to add the same code to all of my controls so I tried creating a custom directive that just adds the ng-template to the innerHtml of it's host and applied it to the AutoComplete control but with no luck.

I know my other option is to create a custom component that just has an AutoComplete control and maybe gets an ng-template as Input but that means I have to wire all of the built-in Inputs and Outputs of the AutoComplete control to my custom component.

I asked this question specifically for this example to simplify it but I have the same issue with many kendo controls. I'm trying to make them generic without writing too much code and it's very hard.

 

Thanks,

Tomer

1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 03 Aug 2020, 08:59 AM

Hello Tomer,

I do understand your frustration on the topic, however, I'm not sure inputting a template would be of any help.

For this to work, you will have to create a TemplateRef instance in your code, as directives cannot hold templates. And I'm not aware of a way to do this from a plain string. Angular expects a TemplateRef and not a plain string that could be inserted with plain DOM manipulations.

It would be possible to define an ng-template in your component code and pass that reference to the AutoComplete, however, that doesn't solve the problem how to configure that code through a directive to avoid code repetition.

If we move away from using templates and go for injecting component instances (components with specified templates can be created in directives), the next problem that would arise is with template variables for value template, list item template, tag template, etc. All those templates pass a variable extracted while iterating the items.

It is in fact currently possible to access a property which holds a reference to the ContentChild queried no data template, however, the problem with dynamic TemplateRef composition still stands. Here's an example. Note that the noDataTemplate is @hidden as it's considered an internal implementation detail. In the example, the directive accesses and and can set the noDataTemplate property, but doesn't set any content because of the aforementioned reasons.

If you want to set just a specific message (just text without any custom HTML), this could be achieved by defining a custom MessageService. Let me know if this is the case, and I will provide a more specific example.

Do feel welcome to provide any suggestions on how the desired functionality could be achieved. If it can be done with clean code, we could of course consider such an enhancement.

Regards,
Dimitar
Progress Telerik

Tags
AutoComplete
Asked by
Tomer
Top achievements
Rank 1
Veteran
Answers by
Dimitar
Telerik team
Share this question
or