Repository navigation
How to use itemTemplate? #13
Description
I found an example inside the repo how to cutomize itemTemplate but it doesn't work for me.
<PickerField hint="Click here"
[items]="countries"
[modalAnimated]="true"
[pickerTitle]="'Choose country'">
<ng-template let-item="item" let-i="index">
<StackLayout class="p-10" orientation="horizontal">
<Label [text]="i"></Label>
<Label [text]="item"></Label>
</StackLayout>
</ng-template>
</PickerField>
Nothing changes inside the list.
I'm trying to implement it on Android platform Google Pixel XL real device.
Can someone help me and tell what am I doing wrong?
Activity
VladimirAmiorkov commentedon Apr 3, 2019
Hi @skined90 ,
Do you mean that the entire
ng-templateis not used or that thep-10class is not applied? Can you provide me with a runnable project that shows the issue?skined90 commentedon Apr 8, 2019
@VladimirAmiorkov Yes, exactly. Sorry but I'm not able to provide you a project. :(
VladimirAmiorkov commentedon Apr 8, 2019
@skined90 Ok, "Yes, exactly" but to which question :)
skined90 commentedon Apr 8, 2019
@VladimirAmiorkov Oh Gosh... Sorry, didn't read well.
ng-templateis used but any css class or html is not aplied to/inside it.VladimirAmiorkov commentedon Apr 8, 2019
Have you read this section regarding how the style the list view part of the plugin. Btw note that there is currently an PR that would introduce breaking changes to the current way that the list view is being styled via css but that PR is still not merged and released, for more details you can follow it.
skined90 commentedon Apr 9, 2019
I've read it but with this, I'm just able to change the text colour of the items, but all other styles refer to
ListViewbut not per item inside it. However, HTML is not applied. When I copy the HTML code from the given example nothing changes.VladimirAmiorkov commentedon Apr 9, 2019
If you cant send me a project can you send me a screenshot or video recording showing this issue. On my end that example work as expected and taping the pickers text field the list that is opened in the modal window is styled accordingly to the html declaration of the ng-template.
skined90 commentedon Apr 9, 2019
Here is the HTML
Here are the screenshots:
skined90 commentedon Apr 10, 2019
Okay. I realized what's the problem. My mistake, but error throwing is not so great. What happened actually is that I imported
NativeScriptPickerModuleinside myAppModuleinstead ofChildModulebut I was still able to use the "half of a plugin".I wouldn't realise it that I didn't have the same problem with the
RadListViewplugin.I'm closing this issue but I think that anyone must not be able to use the component before importing module properly. I hope there is a way to implement it.
VladimirAmiorkov commentedon Apr 15, 2019
Hi @skined90 ,
Thank you for the update. Indeed when working with any kind of UI element that has a template in Angular with lazy loaded components it is possible to hit this "not so great" behavior. Unfortunately there is nothing that we could do to handle it as the source of the issue it its the way Angular itself works when and our custom UI element register. If I can summarise it in few words what happens is that we register the RadListView or ListView tag to be associated with the actual element from NativeScript but the ng-template functionality is handled by the module by Angular, this means that the RadListView or ListView element can be used without the import of any kind of module in an NativeScript + Angular app but any kind of custom directives to that element (like its ng-template) will not work at all and will not raise any kind of error in Angular itself. We have brainstormed and discussed how we can improve this experience when an UI elements custom module is not imported but we either have to not register the html tags for RadListView and ListView which would make the need for you to manually register all if the UI elements in your app or have the current behavior.