Integrating a builder section into an angular app

Technical Questions
1

I went through the basic landing page setup and have builder pages loading in my angular app. I have the npm package and the builder component setup in my app and its working fine.

Now I want to add a builder section on a page which is built in my app. I created a new model “my-section”, and created two sections based on that model - “taskSection” and “heroSection”.

I used the recommended code:
< builder-component model="my-section">Loading..< /builder-component>

It works, but it always loads the first section in the list. How do I tell it which section I want to load?

In the API explorer, I can add a query input:
{ "query.name": "heroSection" }
and it returns the correct one. How do I add that query as an input to < builder-component >?

I can’t get it to work despite trying about 100 variations on this syntax:

< builder-component model="my-section" [data]={'query.name':'heroSection'} >Loading..< /builder-component>

What am I missing?

Thanks
Nick

2

Hi Nick, you’re very close, just needs to pass it in the options input instead of the data

<builder-component model="my-section" [options]="options">Loading..< /builder-component>

Where options is

import { GetContentOptions } from '@builder.io/sdk';

options: GetContentOptions = {
  query: {
    name: 'heroSection';
  }
}