Is there a way to integrate Angular 6 to existing wordpress page? For example page-reservation.php and here run angular project!
Thanks for answering!
You can create a REST route on the WordPress side for that page to send the page content and call it from the Angular side using Angular HttpClient.
for more details about the WordPress REST API check
https://developer.wordpress.org/rest-api/
Angular HttpClient :
https://angular.io/guide/http
Take a look at Angular Elements.
Angular provides the createCustomElement() function for converting an Angular component, together with its dependencies, to a custom element.
With Angular Elements, you can create Web Components (aka widgets) that can run outside of Angular.
Note that there may be limited/lacking support in some browsers.
Related
I have started a new .NET Core template with Angular (with Microsoft identity) and I have started with the UI.
So here I see that the .net core identity uses bootstrap default, and it is not possible to reach that. The solution around that is to create a CSS-folder in "wwwroot", that will be read after the default bootstrap. Even though I would have like to create my own bootstrap theme, I can live with this.
But now I see that the angular lives with a different "theme". Even though it uses many of the same classes I have to define each class in my angular app also in the "styles.scss".
So many classes will be pretty similar (especially if I use NGbootstrap).
So I tried to import "wwwroot/css/site.css" into my styles.scss, so I didn't need to write it twice, that did of course not work.
Is there any way to use the same CSS document in both places, or is that something I should avoid?
New user to 3rd party bootstrap templates for Ember and need help.
I purchased the INSPINIA admin template from www.wrapbootstrap.com. The download comes with multiple pre-created projects with INSPINIA built in (e.g., Angular, Rails, etc.) but not for Ember. I reached out to the creator to see if they could include a project for Ember and they said no.
So, I am curious, does anyone know how to add INSPINIA to an Ember web application? Is it as simple as ember install bootstrap and then copy the *.css file? Note: the INSPINIA template comes with way more files than just a *.css, and I am using ASP.NET CORE 2.2 for the web API.
Any help is appreciated.
When I did the same thing a few years ago, I bought the theme just for the themed css. I used their less and integrated that into my existing ember build. Nowadays I'd use the scss but it's unimportant.
What is important is understanding that bootstrap js components will not simply work in the context of your ember application. If you want callbacks, events, binding, etc to exist in the context of ember (ie within ember's runloop and lifecycle), you will need to wrap each individual component. Luckily, ember-boostrap does exactly that for you. This addon provides the easiest way for you to pull in your bootstrap scss. This addon also does not use bootstrap's js, but rather is a full implementation of the bootstrap component's in a way that is ember-aware.
ember-bootstrap deliberately excludes bootstrap.js
because the jQuery and Ember ways of control flow and animation
sometimes don't play well together, causing unpredictable results.
This is the main motivation behind ember-bootstrap. It is possible to
import bootstrap.js from bower_components or the vendor folder. This
is NOT recommended or supported, and you will be on your own. You have
been warned!
Once you've gotten the scss preprocessing properly set up in your ember-cli-build.js file, you should be able to use their markup more or less directly. You will need to have some understanding, though, of when you're encountering bootstrap markup (stuff with data classes that will be handled by bootstrap's js). In moments like that, you simply use ember-bootstrap components instead
I've built an Aurelia plugin and I'm using some styling there. My problem comes when I want to use this plugin in my existing Aurelia app. The styles are imported at the head so all my Aurelia application is using them.
I've seen the Shadow DOM functionality, the problem is I'm using Bulma so I need the individual components to get styles from Bulma, but at the same time, I don't want the rest of my Aurelia app to get those styles from Bulma.
I don't know what the best option is, so I'd appreciate some help here.
Thanks.
I am working on ReactJS app (with Webpack) for webshop. This app retrieves some shop config from backend (as JSON object). This config contains customCss property that should override css of my webshop app. I am using css modules, but i think it is not easy to override css this way, so my question is what would be the bast way to handle css in my app, and override css with this property in the runtime?
React: css is Js
this the great idea you can go throw it for more guidance
https://speakerdeck.com/vjeux/react-css-in-js
I am building my application using aspnetcore-spa react-redux boilerplate (can be seen on http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/ )
However the server side rendering takes a lot of time (~30 sec) and I would like to disable it. Can you please tell me how to disable server side rendering without breaking the code?
That template adds the asp-prerender-module tag helper to the <div id="react-app"...> tag in Home\Index.cshtml. If you remove that tag helper you will disable server side rendering.
The tag helper is imported in /Views/_ViewImports.cshtml:
#addTagHelper "*, Microsoft.AspNetCore.SpaServices"
You can do the bundling from the command line before you run the application with...
> webpack --config webpack.config.vendor.js
> webpack
Steve Sanderson gave a presentation on this at NDC Sydney.
The aspnet-prerender-module tag helper is part of SpaServices, which is the basis for all the projects generated by the Yeoman aspnetcore-spa templates. Therefore, this is how you would enable/disable pre-rendering in any of those templates, including Angular 2, Aurelia, Knockout, and React (with Redux). The same would apply to any custom project or template that you create using Node package aspnet-prerendering and the aforementioned tag helper.
For Angular 2 project I've solved this by removing asp-prerender-module attribute from <app> tag in Index.schtml.