I've been using NativeScript for a while in some projects. One think I noticed is that "default" NativeScript directives, such as nsRouterLink, tap and some others does not work with components that I created.
The only times those directives works are when they are using with its default" components such as GridLayout, Label, etc.
I've created a small PlayGround project to demonstrate my issue: https://play.nativescript.org/?template=play-ng&id=rZYQGP&v=3
I think I should import those directives into my custom components somehow, but I have no idea how.
Unfortunately it's not as same as Web with NativeScript, you have to attach the events to the actual element and not on the custom selectors. An alternative is that you can emit an event on your custom component when actual element is tapped.
There is a open feature request already.
I'm no expert but I had same issue recently and could make workaround.
NativeScript's pure component should be registered appropriate
ly on Angular environment to work properly.
This can be done with registerElement from nativescript-angular/element-registry.
By registering, the Angular Component should work like intended element.
Unfortunately, the property of the element can only be accessed with HostBinding
I have forked and applied workaround to PlayGround project you have provided: https://play.nativescript.org/?template=play-ng&id=SCLxVk
Related
I am using in my Nativescript Angular app the nativescript-google-maps-sdk plugin which works great.
My issue is that I want to use cached images to display in a custom InfoWindow. For this purpose I am using the nativescript-web-image-cache plugin app-wide. When I use the regular <WebImage> tag in the infoWindow it complains that it is not a registered component:
Module 'ui/web-image' not found for element 'WebImage'
Everywhere else in the app it works just fine. In this issue is it suggested that:
that InfoWindowTemplate content is parsed as Vanilla NativeScript XML, not as Angular XML thus it is not able to find custom Angular Component you created
So the question is how can I still use this plugin? Is there a way I can somehow register the <WebImage> component so it will work in the custom InfoWindow?
Just to make sure there is not another issue, I added the nativescript-web-image-cache plugin to the plain NativesScript nativescript-google-maps-sdk demo project and then the <WebImage> tag works just fine.
Any pointers are highly appreciated!
Anything registered in Angular is not available in Core the same way; so if you have to create a core template; you must also pass in the xmlns:blah="ns-blah" as part of the core template, so that it is registered properly in that core template. The angular registerElement does not do anything for Core. Now you can easily do <IC:WebImage xmlns:IC="nativescript-web-image-cache" ...> and then it is valid in the template. However, I would recommend you put the xmlns:IC on the topmost element you can; as it makes reading the code a lot simpler. But in cases you don't have a parent wrapping element around the item, this is valid code to register it on the same element using it.
NS-Core templates are different than NS-Angular templates; if you attempt to use things that work in Angular like <IC:WebImage [param]="value" (param)="value"/> both the [param] and (param) will totally break template parsing in core. NS-Core's parser is like HTML, nothing is supposed to surround the param and the value should be in quotes. The value can have {{ boundvalue }} to bind a dynamic value into the template.
Normally when passing a NS-Core template into whatever function you need; you want to pass in just the minimal parts; you rarely need to use things like <Page>, <Frame> or any other top level elements. In fact this can cause problems. You normally need just the piece of the layout you are going to have it view. So in this case <StackLayout xmlns:IC=...><IC:WebImage...></StackLayout>
Finally when troubleshooting using Core features in Angular; I highly recommend you put fixed Width/Height and Background colors on each element. This can sometimes show you what is failing.
As InfoWindowTemplate content is parsed as Vanilla NativeScript XML, you could add xmlns:IC="nativescript-web-image-cache" to the root / parent element of your component. Also use <IC:WebImage> instead of WebImage.
Hi I'm trying to play with layouts in nativescript. I was looking at listviews, and I tried this in the playground using the code from the docs (https://docs.nativescript.org/ui/list-view#using-multiple-item-templates).
However, I can't get the listview to display (Playground : https://play.nativescript.org/?template=play-ng&id=nhm5el&v=7). I'm not sure what I'm doing incorrectly for the listview not to be displayed.
Copy/paste error - you have copied the code for your ListView component but at the same time your HomeComponent is empty (and this is where the list view items should be initialized with your DataSerice) - demo here. I would advise against handling multiple components and services in a single file and as a good practice always separate the different components and services in their own files - this way similar error will be much more easier to catch.
I'm in the process of creating my first NativeScript Angular app and it consists of a form that will need to span across multiple screens.
I tried to be creative and add the form pages into slides using TheOriginalJosh/nativescript-slides. This actually worked out beautifully as I was able to slide to each form page smoothly.
But a problem started to arise when initially navigating to the form component as it started to take a few seconds to load. I'm assuming this was happening because the form spans across 10 pages with multiple GridLayouts in each slide. I thought about using TabView but I wouldn't need the menu portion of it and I'm worried it will cause the same issue with loading speed.
So what is the best way to implement this?
Should I just create 10+ form components, use a universal service and just route each form part to another or is there a better way to "encapsulate" this into one component without any performance loss?
I also saw in the NativeScript documentation about this..
It is possible to nest <router-outlet> component inside <page-router-outlet> or another
<router-outlet>
But there isn't any documentation on how to implement this.
There are many way to use nested router-outlet in ns, and in a very big project, it is best to use shared modules architecture, which enable a module nested in another, so the view can be nested too.
Here is my nativescript sample with nested using shared modules architecture :
in profile is nested in app.component.
in parent view:
https://github.com/Arthurisme/auth0-iosmorphic/blob/master/Mobile/Nativescript-for-Spring-Auth0/app/app.component.ts
in childview:
https://github.com/Arthurisme/auth0-iosmorphic/blob/master/Mobile/Nativescript-for-Spring-Auth0/app/profile/profile.component.html
I started developing a desktop-class application using Electron, and am referring to the starter app as well as the Electron API demo app. This application has a single screen with multiple sections. Interaction within one particular section can cause other section(s) to get updated. These interactions must be in sync with an underlying model [object]; two-way data binding could be helpful here.
What is a recommended way to achieve a multi-section window with each section interacting with one another? Should I compose the layout using DIVs and CSS, or is there a library that I can use effectively with Electron? I was thinking about Handlebars or Jade but I am not sure if I need a template engine, as the entire screen is not rendered and only particular sections will be updated.
I want to build a large application in Dart using material design. To accomplish this I included paper_elements into my project. My problem is, that I can't think of a good way to build my multi page application with paper_elements. Usually I create objects which would create their elements inline and add / remove themselves to the dom. The way I understand the paper_element tutorials I found so far this is not possible with them.
Is there a simple way to use paper_elements in dart while having an object based structure? For example I would have my application which loads either a register or login object and displays it in the browser. When logging in it should load a menu object which displays a menu and so on. All page changes should happen without a page reload.
I'm looking forward to all help, examples or links you could provide regarding my problem.
Cheers,
Tim
In Dart you normally build the app as SPA (single page application) without reload.
You can add remove a paper-element like normal DOM elements (div, input, ...) querySelector('#placeholder').append(new Element.tag('paper-input'));
You can also use <template if="{{}}"> or <template repeat="{{}}"> to make Polymer auto-insert these elements when certain conditions are fulfilled or for each value in a collection.
Your question isn't very specific but I guess all you need is already available here on SO as Q/A. Just search for [dart-polymer]. If you don't find anything just ask and we point you in the right direction.
a few that might be relevant
Dart Language: Polymer - Working with views
How to update polymer element bindings after it was removed from DOM and inserted again
How to add attributes to a dynamically created component
how to implement a main function in polymer apps (you don't need a main() when you use a polymer-element that acts as a container for your entire application)
Is imperative Mustache-Binding in Polymer.dart supported?