Home App Docs Github

Angular integration

Hi,

How could builder.io be used with an existing angular project. The project already has all a data layer and components coded up. In the next months we would like to improve UX and we are looking for tools that help us to be most efficient. Currently we use Adobe XD for design and Visual Studio Code for development but there is quite a bit of back and forth and double work and we are wondering if there is a way to optimize it. Builder seems to help there but the question is how we could integrate it in our tooling and how much effort that would be. We are not really comited to Adobe XD and could replace it. For Angular it is different since that would require quite a bit of work.

Is there a suggested way that would allow us to keep the data layer and inject the data in components created with builder?

Best regards,
Richard

2 Likes

Hi Richard - welcome to the forum, and thanks for the question!

To use Builder.io within an existing Angular project, you can follow these steps:

Quick start

  1. Install:

npm install @builder.io/angular

  1. Add the module:
import { BuilderModule } from '@builder.io/angular';

@NgModule({
  ...
  imports: [ BuilderModule.forRoot('YOUR_API_KEY') ],
  ...
})

export class MyAppModule {}
  1. Add the component wherever you would like to show Builder.io content:
<-- The model input can be any model of yours -->
<builder-component model="page"(load)="contentLoaded($event)". (error)="contentError($event)">
<-- Default content inside the tag shows while the builder content is fetching -->
    <div class="spinner"></div>
</builder-component>
  1. Setup your models’ preview url to point to an instance of this angular component on your site (e.g. local, staging, or production)

Using your site components in the drag+drop editor

You can drag and drop to add your angular components in the Builder editor with a simple tag like below:

import { BuilderBlock } from '@builder.io/angular';
import { Component, Input } from '@angular/core';

@BuilderBlock({
  tag: 'custom-thing',
  name: 'Custom thing',
  inputs: [
    {
      name: 'name',
      type: 'string',
  },
  ],
})
@Component({
  selector: 'custom-thing',
  template: 'Hello: {{name}}',
})
export class CustomThing {
  @Input()
  name = '  ';
}

Dynamic landing pages

You can also use Builder to create custom landing pages in your code. Simply replace your 404 component with something like the below to allow creating new pages in Builder easily:

<-- The model input can be any model of yours -->
<builder-component
  *ngIf="!noBuilderPageForUrl"
  model="page"
  (load)="noBuilderPageForUrl = $event ? false : true"
  (error)="noBuilderPageForUrl = true"
>
  <-- Default content inside the tag shows while the builder content is fetching -->
  <div class="spinner"></div>
</builder-component>
<my-404-component *ngIf="noBuilderPageForUrl"> </my-404-component>

Builder components within existing pages

With component models you can also use Builder.io components in/around existing pages (aka it doesn’t have to control the whole page). See info on making custom models for this here

<!-- The first part of your page -->
<builder-component model="my-section">Loading..</builder-component>
<!-- the rest of your page -->

You can then use queries and targeting to customize what content loads where

Using your app’s state and functions in Builder content

Lastly, you can use your state or functions in your Builder pages. Use the data input for the Builder component tag to pass down data and actions to be used in the Builder editor.
See this guide for usage of your data and actions in the editor UI in Builder.

@Component({
  selector: 'my-page',
  template: '<builder-component name="page" [data]="data"></builder-component>',
})
export class MyPage {
  data = {
    someStateProperty: 'foo',
    someMethod: () => /* do something */,
    myService: this.myService
  }
  constructor(public myService: MyService) {
  }
}

Learn more

See our full angular SDK docs and source code here as well as examples of using Builder.io with Angular here and with Angular Universal here

I hope this helps! If anything is unclear or if you have any other questions, let us know!

3 Likes

Hi,

thanks, I had a look at that and I did create a component and used in my Angular app.

From what I have seen sofar from several videos in your docs and from my basic implementations, it seems that the components generated via your webpage are closely tied to communications with your server. However, I have the entire state and functions to alter that state already on the client and I don’t want to replicate them. I guess what I really want is to use your visual builder to generate the components that interact like regular angular components where I hand data (javascript objects in like angular @Input) and get back events that I can handle in the parent (like angular @Output). While there seems to be a way to provide data objects to the components (I have seen the documentation but didn’t get it to work yet), I didn’t find a way yet to emit events to my angular parent component where I could process the state changes in angular without round trips via your server that are bad for the interaction speed.

Do you have any suggestions how that could be accomplished?

Hey @richard - you can do that with the data input in an upcoming version of our Angular SDK

This allows you to pass state, event emitters, etc down to Builder.io content and use that state and trigger functions, event emitters / outputs, etc from within Builder.io content

E.g.

@Component({
  selector: 'my-page',
  template: '<builder-component model="page" [data]="data"></builder-component>',
})
export class MyPage {
  data = {
    someStateProperty: 'foo',
    someOutput: this.myOutput,
    someMethod: () => /* do something */,
    myService: this.myService
  }

  @Output()  myOutput = new EventEmitter<boolean>();

  constructor(public myService: MyService) {}
}

You can see more info on how this is used in React and will be supported soon in Angular here, including how you can use the data and actions in the Builder.io content and UIs: https://www.builder.io/c/docs/react/custom-actions

Hi,

that sounds interesting. If it works the way I understand, this is pretty much what I would need.