To render custom fields in a custom widget plugin, you will use the same approach as rendering the predefined field types. Make sure to give your custom field a unique name that can be used when rendering the content element in a custom widget plugin. That’s why we started developing our own custom YOOtheme Pro elements. For sure we are not the only ones who would like to have more YOOtheme Pro elements, so we want to share them with you. The elements can be purchased for a small amount of 20 € (excl. VAT) per element. JP CE Modal ProOur Modal Pro custom element is a super effective tool to load modules inside of a modal. You can add it as a clickable button ur an auto/onLoad type event. Download free custom elements for YOOtheme Pro. YOOtheme Pro is a page builder for Joomla! And WordPress developed by YOOtheme and claimed to be the most powerful theme and page builder. It offers more than 30 built-in elements with a lot of options. Custom Element for YOOtheme Pro (Joomla & WordPress). Usable with dynamic content. Supports YOOtheme 2.0. Needs YOOtheme Pro 1.20 or later. Updates for 180 days after purchase via download. Support via E-Mail for 180 days after purchase. Configurable in.

Update: I’ve published an up-to-date article about Angular Elements. Check it out to learn about the latest API of Angular Elements:

👉 Angular Elements
I just published 'A Practical Guide to Angular Elements' 🚀😍https://t.co/v6PKPb8qza#Angular#AngularElements#CustomElements#WebComponents#StackBlitz#JavaScript#js#WebDev#WebDevelopment#FrontEnd

Keep reading this article in order to get a sense of the concept.

Two and a half months have passed since Angular Elements project was revealed at the AngularConnect conference and shocked the Angular community:

Here's the slides from my Angular Elements talk @ #AngularConnect - https://t.co/4kuySZ9zMs

Along with a lot of excitement and expectation, it’s really important to remember that:

As of today, Angular Elements is just an experimental project of the Angular Labs.

Don’t get me wrong - this project is brilliant, without a doubt. But, you should know that it’s not ready for production purposes and either for development.

In case you’re not familiar with the Angular Labs term - it’s an idea that was announced during the AngularMix conference, in order to balance the community with new explorations - before these are released officially. In other words, it’s the place where the really cool things are started.

This article will examine what are the benefits of Angular Elements, through creating an experimental custom element and rendering it inside a non-Angular project, such as React.

Imagine that you’ve developed an awesome Angular component. However, in real life, not all the web applications are Angular-based or even single-page. You wish to use your amazing component as part of any web application in a non “hacky” way. Soon, there will be a neat way and it’ll be called - Angular Elements.

Angular Elements are ordinary Angular components, which are packaged as Custom Elements. In fact, Angular takes charge of initializing a custom element and bridging the attributes, events and lifecycle hooks between the component to that custom element.

“Angular Component on the inside, standards on the outside.” (Rob Wormald)

This approach let us develop reusable components in the way that’s familiar to us, and yet, embedding these in every kind of website (vanilla JavaScript, React, Vue, WordPress, etc. - it really doesn’t matter).

Well, are you ready to build a custom element? 😉

Let’s create a component to show the world how much we love the open source community:

Notice that’s an ordinary component, which displays a “Made With Love” message and receives a few parameters: the developer name, his website, a valid color format (RGB, Hex, etc.) and a size for the heart. The name attribute is mandatory, so we log an error in case it’s undefined or empty. We bind these attributes inside the appropriate template and display a non-clickable developer name when the URL isn’t provided.

The styles file is pretty straightforward, thus we won’t dive into it.

The next step is attaching the source code of @angular/element package inside our project, in order to import the registerAsCustomElements function and the other necessary files. In practice, we should avoid that way of importation. However, these files aren’t available at this time on master - so when these are merged into master, we’ll install and import them like a regular Angular package. This package is targeted to be published as part of Angular 6.Update: It’s already available on master and you should install it like a regular package. Read my new article here.

Now, we register our component with the AppModule:

In the above example, we create an array of custom elements. Also, we register its items with the declarations and entryComponents arrays. In case you didn’t know, “Entry Components” is an array of components which aren’t embedded in a particular template, but still created somehow imperatively.

As opposed to other AppModule files - we don’t register a bootstrap component with this module, because we don’t have (and need) one like that. This is why ngDoBootstrap is implemented as an empty stub as well.

Great, we’re making progress. So far, we created a component and registered it with a module - but, we haven’t done yet any distinctive thing with Angular Elements. Let’s get the hang of it!

As you know, there’s a main.ts file for each Angular application. This is used as the main entry point which bootstraps the application. As mentioned above, we don’t have a bootstrap component. However, our custom element should have a self-bootstrapping capability. So, in order to achieve that, let’s use the registerAsCustomElements function:

As you can see, we pass the customElements to that function. After the bootstrapping process finishes, it takes each component in the provided array and wraps it with the Custom Element Web API. Currently, the browsers don’t support custom elements perfectly and thus we load several polyfills.

Take a look at the final result:

Well, it’s about time to give our custom element a try. You should know that my blog isn’t an Angular-based (based on Hugo actually) so it’s a perfect match to render the element here:

In case you traverse the DOM of this page, you’ll notice the following usage alongside its scripts file:

As I promised you, here’s an example for a React project that renders our custom element:

Angular Elements will provide a way to share our components everywhere on top of custom elements (web components). We covered this new way with a brief introduction and building an embeddable Angular element.

Here are some references you’d probably like to check out:

Addons are encapsulated features that enhance or add new functionalities to the YOOtheme Pro builder. They are enabled by default, but if required can be individually disabled in the Theme -> Settings -> ZOOlanders panel.

# Forms

Forms addon extends YOOtheme Pro builder with a form build and submission workflow, allowing for any section, column, or row to become a submittable Form Area. The form configuration is located for those elements in the Advanced Tab settings, under the Form field.

An icon will be displayed in the Builder Element field giving you a hint about the form configuration. If there is any error the icon will turn red and indicate one of the possible configuration errors.

The most important form configuration is the Actions, those allow to further process the submitted data or simply show a message of a successful submission.

The form fields are represented by the Form Elements under the group ZOOlanders Form, and as long as they are inside the Form Area the inputted data will be picked up and processed.

Not all elements are meant for inputting data, the Form Fieldset element allows to group fields into a fieldset, while the Form Submit Button element allows the user to submit the form. Be sure to explore them all for composing the perfect form for your project.

Yootheme Custom Elements Custom

At this point, the form should be successfully processing submissions! To further learn and deep into the subject please refer to the Forms In-Depth section.

# Access

Access addon extends YOOtheme Pro Builder elements with rendering conditions, located on each element Advanced Tab settings, under the Access -> Conditions panel.

Access conditions are composed of core and custom rules, when a rule is enabled it options will reveal, and the element rendering will be evaluated against the logic and configuration set by it.

An icon will be displayed in the Builder Element field giving you a hint about the access evaluation.

To further learn and deep into the subject please refer to the Access In-Depth section.

Yootheme Custom Elements Tutorial

# Icons

Yootheme Custom Elements Names

Icons addon extends YOOtheme Pro Builder with core and custom icon collections like Font Awesome, Ionicons, and others. The icons are natively integrated and accessible in the icon picker Modal when requested from any icon field.

Each collection will be displayed on its own Tab with sub-tabs separating the groups. Being all GPL, MIT, or Creative Commons licensed, you can use them in personal as commercial projects.

Additionally, the modal is enhanced with a Search field that also extends the core UIkit icons making it possible to easily find an icon by it name.

To further learn and deep into the subject please refer to the Icons In-Depth section.

# Elements

A collection of elements available under the group ZOOlanders. Their integration with the Builder is as native, using the YOOtheme Pro elements settings and other conventions.

Yootheme Custom Elements Design

To further learn and deep into the subject please refer to the Elements In-Depth section.