I am trying to migrate from ngx-translate to Angular i18n approach and wanted to make sure a few points before migration.
Is it possible to translate inside the service and component without any template? In ngx-translate it was possible using translate pipe.
Is there any approach which angular has introduced for V7 or planning to introduce in v8 for translating inside component and service level?
Is this currently only possible using workaround and there is no angular way to do it? If yes, shall i go with angular i18n approach OR better to continue with ng-tranlate package?
Thanks in advance!
You can find the corresponding gitlab issue here. There is still no milestone set to it, so I guess it will take some more time for this feature to be implemented.
For those who are looking for a possible workaround to get translations inside Angular 7- components: I personally use the following workaround, which you also can find together with some other proposals in the gitlab issue:
Create hidden elements in the template
<span style="display: none;" #trans-foo i18n>foo</span>
Bind them using
#ViewChild('trans-foo') transFoo : ElementRef;
Then retrieve the translated value
transFoo.nativeElement.textContent
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.
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
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 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?
i have created a component using this http://www.notwebdesign.com/joomla-component-creator/index.php component creator how can i add a simple registration form in that and also make its backend looks like the other component
The name of that utility is a little misleading since it only creates the structure of a component. If you want to add functionality to the structure created you will need to actually put in the code that does what ever you need it to do. Think of this as the foundation and framework of a house. You actually have to put the walls up and furnish it.
It would probably be helpful to understand the files that have been created for you so you know what needs to be added. I would recommend learning how to build a component from scratch first. Joomla has pretty good documentation on that here - http://docs.joomla.org/Developing_a_Model-View-Controller_Component_-_Part_1
i have develop the Lots of component from this site http://www.notwebdesign.com/joomla-component-creator/index.php .
1) First Create the components and give the name and crrate the require field fo the registration from .and save the components then after the download this components.
2) Install the components in your joomla site.
3) Go to the Fornt-end view components folder. and create a form in the default.php page and save and update operation query is written in the model .
Your Registration page is ready.
This tutorial is the best I have come across so far. It will hopefully guide you to understand the MVC structure that the component generating site delivers to you.
I am actually the developer of the Component Creator you have used. It only creates the MVC files and structures needed to quickly create a component. You still need quite good PHP skills to develop a fully working component.
The component creator helps developers with the tedious tasks of building the framework.