builder.parse() with bindingContext

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?

score 0 · Answer 1 · answered Jun 10 '19 at 12:14

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.

builder.parse() with bindingContext

1 Answers1