CODEWITHSUNDEEP
angulartypescriptnativescriptangular2-nativescript
Donadon
Donadon

Reputation: 113

FlexboxLayout addChild is not a function

I need to mount a visualization for data downloaded by REST API but gives error on dynamic making by typescript. The data is coming correctly from the server.

<FlexboxLayout
    flexWrap="wrap"
    #flex
>
</FlexboxLayout>

On typescript:

import { FlexboxLayout } from 'tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout';
import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout';
import { Image } from 'tns-core-modules/ui/image';
import { Label } from 'tns-core-modules/ui/label';

// ...

@ViewChild('flex',{static: false}) flex: FlexboxLayout;

ngOnInit() {
  // Populate the categories variable with server data

  categories.forEach((cat) => {
    this.createCategView(cat);
  });
}

createCategView(c: Category) {
  let stack = new StackLayout();
  let img = new Image();
  img.src = c.image;
  img.stretch = "none";
  img.width = 25;
  img.height = 25;

  let label = new Label();
  label.text = c.name;

  stack.addChild(img);
  stack.addChild(label);

  this.flex.addChild( stack );
}

But this last command line returns an error saying that this.flex.addChild method is not a function.

Upvotes: 0

Views: 136

Answers (1)

Manoj
Manoj

Reputation: 21908

If I'm not wrong, you may only be able to assign Angular Component as type to variable annotated with ViewChild. So you can not read flex as FlexboxLayout but ElementRef.

@ViewChild('flex',{static: false}) flex: ElementRef;

Also ngOnInit may be little too early, try ngAfterViewInit or loaded event of the layout itself.

Upvotes: 1

Related Questions