Sync Angular /src using Webflow update here

{{state }}

{{ filename }}

{{ status }}

{{state }}

{{ filename }}

{{ status }}

Clear Sync Download

{{ quotaStatus }}

How to sync your Angular project with the latest update from your Webflow project:

  1. If this is your very first time doing a sync operation then you should take the precautionary step to do a backup your current Angular project before you do anything.
  2. To preserve any Angular attributes you may have added between updates from Webflow you need to add an id value in Webflow to each and every single HTML tag that you wish to preserve between updates from Webflow (See Tutorial).
  3. Once you have carried out step #1, you need to create a zip of the /src directory inside your Angular project.
  4. Then you must download the latest version of your Webflow project zip file using it's Code Export feature.
  5. Once you have both your Webflow zip file and your Angular zip file all you need to do now is drag and drop both files into the appropriate boxes you see displayed to the left.
  6. Press the Sync button and let FreeFormJS do it's thing!
  7. Press the Download button and look for a zip file with the extension .freeformjs.zip in your downloads folder.
  8. Delete the current /src folder in your Angular directory.
  9. Unzip the .freeform.zip file and you will see a /src directory and move it into your Angular directory.
  10. Your Angular project has now been updated and your previous edits have been preserved.

What you need to know when doing a sync on Angular /src from a Webflow zip file:

  • There are 11 specialized tokens created by FreeFormJS to address 11 different areas of customizations when doing a sync operation.
  • They are each listed to the right of this section.
  • For a really basic website, you really only need to know how to do an ng-id and perhaps a little bit about the ng-router.

If you want to preserve edits to your HTML code between updates from Webflow you need to know about:

ng-id

Some projects you do with FreeFormJS may need additional changes to default parameters. To meet those needs you have to see the Projects page and setup an individual project:

To setup an individual project see the following:

ng-project

Optional information that is not required for basic Angular projects. However if there is something you want to do that is not immediate obvious (such as see a <button> tag in your HTML) then take a look at the refinements we have made possible here:

If you wish to customize the index.html file you need to know about:

ng-router

If you wish to create special Angular components based on Webflow symbols then you need to know about:

ng-component

If you wish to indent your HTML inside your Angular project then you need to know about:

ng-indent

If you wish to add custom CSS to your Webflow project then you need to know about:

ng-componentcss

If you wish to use the <button> HTML tag properly then you need to know about:

ng-morph

If you wish to the Webflow tabs pane inside Angular then you need to know about:

ng-table

If you wish to automate the sync operation between Webflow updates then you need to know about:

ng-monitor

If you wish to use { { field } } constructs inside Webflow then you need to know about:

ng-field

If you need to designate some pages as standard non-Angular HTML then you need to know about:

ng-external

If you need to setup a stand-alone server to run your Angular code in production then you need to know about:

ng-express