builder.parse() with bindingContext - nativescript

Question

I have the following code:
private loadSlides(): Promise<any> {
return new Promise((resolve, reject) => {
const component = builder.parse(slideTemplate);
component.bindingContext = {
content: 'HHAHAAHA'
};
resolve(component);
});
}
and this is the value for slideTemplate:
export const slideTemplate: string = `
<GridLayout row="0" rows="*, 2*, *">
<GridLayout width="57%" row="0" horizontalAlignment="center" verticalAlignment="center">
<Label class="lobster-regular carousel-item-head" [text]="content" textWrap="true"></Label>
</GridLayout>
</GridLayout>
`;
Now when I bind the value from my template it only shows empty string.
Why is that so?

Answer 1

You can not use Angular template / binding syntax with builder.parse(...), it's created outside Angular context.
Since you are using bindingContext which is NativeScript Core way of handling data binding, you should use text="{{ content }}"
export const slideTemplate: string = `
<GridLayout row="0" rows="*, 2*, *">
<GridLayout width="57%" row="0" horizontalAlignment="center" verticalAlignment="center">
<Label class="lobster-regular carousel-item-head" text="{{ content }}" textWrap="true"></Label>
</GridLayout>
</GridLayout>
`;
I'm unsure why you may need builder here, I would suggest sticking with Angular components if possible.