This guide covers setting up your project with Builder.io for Angular. With Builder Develop, this setup is necessary if you plan on using component mapping and want to preview your components in Builder's Visual Editor.
Before you begin, make sure you have:
- Node.js
- An Angular project
- A Builder account with a Builder Space
First, you need to install the necessary packages for Builder.io and Angular:
npm install --save-dev concurrently @builder.io/dev-tools @builder.io/angularNext, add a development task to your npm scripts. This will run both the Angular development server and Builder.io Dev Tools concurrently:
"scripts": {
// ...existing code...
"dev": "concurrently \"ng serve\" \"builder-dev-tools\""
}Add your Builder API key to the environment.ts file:
export const environment = {
production: false,
builderApiKey: "<YOUR_BUILDER_API_KEY>",
};Press Cmd/Ctrl + k and filter for api to get your Public API Key. For details see Using Builder API Keys.
Create a new file at src/app/builder-registry.ts to register your custom components with Builder.io:
import { Builder } from "@builder.io/angular";
// Import your custom components
// import { YourCustomComponent } from './your-custom-component';
// Register your custom components
// Builder.registerComponent(YourCustomComponent, {
// name: 'Your Custom Component',
// inputs: [
// { name: 'text', type: 'string' }
// ]
// });
// Export your custom components for use in the Figma imports page
export const CUSTOM_COMPONENTS = [
// YourCustomComponent
];For more details on registering components, see Register custom components.
Create a new component for previewing Figma imports at src/app/figma-imports/figma-imports.component.ts:
import { Component, Input } from "@angular/core";
import { fetchOneEntry, type BuilderContent } from "@builder.io/sdk-angular";
import { Content } from "@builder.io/sdk-angular";
import { CommonModule } from "@angular/common";
import { environment } from "../../environments/environment";
import { CUSTOM_COMPONENTS } from "../builder-registry";
@Component({
selector: "app-figma-imports",
standalone: true,
imports: [Content, CommonModule],
template: `
<builder-content
[model]="model"
[content]="content"
[apiKey]="apiKey"
[customComponents]="customComponents"
></builder-content>
`,
})
export class FigmaImportsPage {
@Input() model = "figma-imports";
apiKey = environment.builderApiKey;
content: BuilderContent | null = null;
customComponents = CUSTOM_COMPONENTS;
async ngOnInit() {
const urlPath = window.location.pathname || "/";
const builderContent = await fetchOneEntry({
model: this.model,
apiKey: this.apiKey,
userAttributes: {
urlPath,
},
});
if (!builderContent) {
return;
}
this.content = builderContent;
}
}This component means you can:
- Preview designs imported from Figma within your Angular application
- Discover how your custom components render with Builder content
- Test the integration between Builder and your Angular app
Add the figma-imports component as a route in your Angular router, but only in development mode:
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { RootComponent } from "./root/root.component";
import { environment } from "../environments/environment";
import { FigmaImportsPage } from "./figma-imports/figma-imports.component";
const routes: Routes = [
{
path: "",
component: RootComponent,
},
// ...existing routes...
];
// Only add the Figma plugin route in development
if (environment.production === false) {
import("./builder-registry");
routes.push({
path: "figma-imports",
component: FigmaImportsPage,
});
}
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}After completing the setup:
- Start your development server with
npm run dev. - Navigate to
http://localhost:4200/figma-importsin your browser. - If everything is set up correctly, you should see a blank page or any existing Builder.io content for the "figma-imports" model
- You can now configure your components in Builder.io's Visual Editor and they will appear in your Angular application
- Blank Page: If you get a blank page, check that your API key is correct and that you've created content for the
figma-importsmodel in Builder. - 404 Error: Ensure that the route is correctly configured in your router.
- Component Not Rendering: Verify that your components are properly registered in
builder-registry.ts. - Build Errors: Make sure all dependencies are installed and that your Angular version is compatible with Builder.io
import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import type { RegisteredComponent } from "@builder.io/sdk-angular";
@Component({
standalone: true,
template: `<custom-button>{{ textContent }}</custom-button>`,
inputs: ["textContent"],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
class CustomButtonComponent {
textContent = "Click me!";
}
export const CUSTOM_COMPONENTS: RegisteredComponent[] = [
{
name: "Custom Button",
component: CustomButtonComponent,
inputs: [
{ name: "textContent", type: "string", defaultValue: "Click me!" },
],
},
];Currently the Builder Angular SDK only supports Angular components, but you can use Angular elements to wrap web components so they show up in the Visual Editor.
The inputs in the registered component map Builder fields to Angular component inputs. The Angular component is a thin wrapper over the web component, which is the actual component that will be rendered in the Visual Editor.
Now that you've set up Builder Devtools for Angular, you can:
- Register your custom components in the
builder-registry.tsfile. - Create new content in Builder using the Visual Editor.
- Import designs from Figma and map your Figma components to your code components.
- Configure your content models in Builder.
- Integrate Builder content into your main application.