how dynamically initialize components of materialise design lite (google) for SPA ? As I am dynamically initializing the components in a view the JS is not initializing. As i have tried with many solutions using componentHandler.
To initialize the javascript components of MDL not starting to window.load you must update the DOM component:
componentHandler.upgradeDom();
For more information
https://github.com/google/material-design-lite/issues/871
Related
has anyone tried using Tabulator in a Polymer 3 project?
Polymer is not supported by Tabulator but maybe someone has tried to integrate it.
Thanks
Tabulator is a vanilla JS library, as such it will work in any JavaScript Frontend Framework without issue.
The supported frameworks list on the website simply demonstrates how to set it up with those frameworks. If you follow the standard Quickstart Guide you should be up and running in no time.
With most frameworks it is simply a matter of passing a reference to the div created by the framework into the first argument of the constructor instead of the CSS selector string.
You would normally need to instantiate Tabulator after the render phase of your particular framework.
If you do get something setup then please submit some simple demo code as an issue on the Tabulator Git Repo and i can add it to the website to help others
The Framework Documentation includes several examples of setting up Tabulator in a frontend framework that should give you some pointers on how to address the issue.
I have an angular 8 project. I tried to export one component of it as
.js file.
Is it possible to export only one component as js file?
is it possible to embed it in a legacy webpage? perhaps as
in head.
Take a look at Angular Elements Overview. According to the documentation, it should be possible to export only components you want.
Angular elements are Angular components packaged as custom elements (also called Web Components), a web standard for defining new HTML elements in a framework-agnostic way.
Custom elements are a Web Platform feature currently supported by Chrome, Firefox, Opera, and Safari, and available in other browsers through polyfills (see Browser Support). A custom element extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. The browser maintains a CustomElementRegistry of defined custom elements, which maps an instantiable JavaScript class to an HTML tag.
I am working on a JHipster project (monolith, angular 4 currently) and recently have been investigating the use of dynamic forms.
I came across the following:
https://www.npmjs.com/package/angular2-json-schema-form
Should JHipster move to natively support this feature ?
Any advise on embracing dynamic forms into the current jhipster generated client side typescript code ?
I am thinking of modifying the client side model objects manually to incorporate form data that can be be used in dynamic forms.. and removing most of the HTML form code.
Thanks,
Fergal
I'm trying to find a way to import the Prismic.io javascript kit in my Angular 2 project.
Is there a way to do so ? I tried to understand their Angular2-starter but it's not documented to do it on an existing project.
I want to know if there is a way to import node modules directly into Angular2 ?
Thanks in advance !
You need to be more specific, what does it mean import modules directly into angular 2?
First, to have common ground about modules:
Modules are a core feature of javascript, either natively in ES6 or using bundlers (e.g WebPack, SystemJS, etc...)
Importing a modules is not related to Angular 2
As for Angular 2, if by using directly you mean being able to inject service via the dependency injection then this is just a configuration operation done in angular.
In the case of an external, 3rd party, NON Angular library you might want to wrap it with an angular service which is then injected.
The starter project you linked to does so, it defined a prismic-service class that wrap the original prismic library so you only work against the wrapper class.
You can extend this class to support more features as you go.
Some notes on extending 3rd part libraries in angular 2 vs angular 1:
AngularJS (1) developers approach 3rd party libraries with caution. Since AngularJS has an internal change detection mechanism that Angular has to manage, execute and control. Any 3rd party library that modifies data that directly or indirectly effects the UI must also trigger the internal change detection in angular.
In Angular2 change detection is triggered by generic async operations such as events, user interactions, etc... Angular does not manage it directly, it is triggered automatically as if it was magic. This is possible due to the help of Zones which is both a concept and a library. Angular implements NgZone.
Basically it means that you can use prismic directly or as a wrapped angular service, it doesn't matter, it will just work.
I guess that most of your questions will focus on integration, which is how to take the data from the API and make a UI out of it.
The prismic Development kit provides a REST API for retrieving metadata about UI elements and data that they contain.
The client (in a SPA, like angular 2) needs to display actual UI components from the metadata.
In other words you need to build Angular 2 components that correspond to the components in prismic.
A common JavaScript library that builds a UI from prismic REST API data will not work here. It will generate HTML code that is not part of the angular application and does no participate in change detection, lifecycle hooks and routing.
All components in angular must be compiled first, at the bootstrap or at build if offline compiler is used.
The minimal approach is to get the HTML markup from the server and inject it into an angular component acting as a wrapper. This allows control over the lifecycle of a page and used for routing, page transition animation etc...
The starter project provides such a wrapper called DocumentPage. The DocumentPage has logic to download it's content (via route parameters) from prismic and display it as raw HTML. See here
The html markup retrieved from prismic is NOT bindable and you can't apply change detection and expressions in it. If you split it into chunks you can apply some angular magic in between.
So, it's quite simple actually, the starter project is a simple wrapper around the prismic framework in both API and UI. Angular has a small part in the application as it acts as a simple wrapper/container. The actual content is driven by prismic. I don't see benefits using angular with such approach, it doesn't do any harm but it's not really an angular app.
A proper angular2 prismic app would be built upon pure metadata representation of components which are implemented in angular as angular components. It is quite an advanced app that requires dynamic component creation as well as advanced routing implementation with lazy loading (to introduce new components on the fly).
Is there any way to inject platform specific views into shared pages?
Say I have a TabbedPage in my shared project, and I would like to inject a Page/View into it that uses the platform specific 2D drawing features, how would this best be solved?
In the ContentPage you can add your own custom view control, to which you can then implement Custom Renderers - one for each platform from this shared view.
Its from within the Custom Renderers classes where you can then access all the native APIs such like overriding the OnDraw(canvas canvas) and do your custom 2D drawing on Android etc.
When you mention Page/View, I am going to assume you are really meaning View, as I don't believe its possible to render a ContentPage within an existing ContentPage.