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
- Install:
npm install @builder.io/angular
- Add the module:
import { BuilderModule } from '@builder.io/angular';
@NgModule({
...
imports: [ BuilderModule.forRoot('YOUR_API_KEY') ],
...
})
export class MyAppModule {}
- 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>
- 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!