Integrating with Angular 2 (and similar app dev frameworks)

Community resources Product feedback
1

I’m trying to figure out the best way to integrate Webflow into our web app dev process. I’ve read other posts about adding custom attributes, etc… but it appears there is no clear solution yet.

I’m finding it very efficient to prototype my Angular data models in CMS collections, generate sample data, then use Dynamic Data controls to bind and build my UX. In my case, with Angular 2, I’m also careful to create style classes (section->container->…) that align with each angular 2 component so the exported code is easy to cut/paste into the corresponding Angular components.

This works great because I can design the component view and use the collection data and the Dynamic Data control to quickly see how things look with many/few/no rows of data and ensure things work great before moving on to coding it in Angular. The resulting code from Dynamic Data appears to follow a structure that is easy to translate into Angular.

Exported sniplet for a search results component:

<div class="search-results-component">
   <div class="w-dyn-list">             <!-- add *ngIf="collectionItems.length >0" --->
      <div class="w-dyn-items">      <!-- add *ngFor="let collectionItem of collectionItems" --->
          <div class="w-dyn-item">
             <div class="search-results-row w-row">
                 <div class="w-col w-col-8">
                    <h4 class="search-results-name"></h4>    <!-- Missing: collection binding syntax --> 
                 </div>
                 <div class="w-col w-col-4">
                    <h4 class="search-results-genres"></h4>   <!-- Missing: collection binding syntax -->
                 </div>
                 ....

I was hoping that the exported code would leave some type data binding expression in the HTML so that I could search and replace with the Angular expression. My CMS collection fields were named as I want them in Angular so that would have plugged in easily.

Alas, everything is removed during the export.

Question 1: is there a way to have webflow include its binding info during export? Unlike some of the other posts, I’m not looking for the export to create pages for all the actual CMS data, nor work with the Webflow CMS API from my exported site, I’m just looking for an option to include the field bindings in the HTML so I can make the design->export->integrate->repeat loop faster.

Question 2: a bonus would be to allow the user to select the binding syntax for the export so the native webflow binding can be translated into, for example, Angular 2 syntax (which is pretty straight forward)

I’m probably over simplifying and/or got some of this wrong, however, I LOVE, LOVE, LOVE Webflow and desperately want to include it in my app dev process so I’m looking for any suggestions / upcomming features that would make this a possibility.

Thanks for all your good work on this product!

2 Likes