Adding children dynamically into flexbox parent


Hi all

I have been wrestling with an issue with injecting custom components into a flexbox layout parent.

I am injecting using:

@ViewChild(‘flexbox’, {read: ViewContainerRef}) flexbox;

const factory = this.componentFactoryResolver.resolveComponentFactory(ProductButtonComponent);
const ref = this.flexbox.createComponent(factory);

The items are rendered, but they appear in a vertical list (like how a stacklayout would render)

When I inject using a factory, do I need to be aware of anything. for example, I lose the css or something similar?

Thanks all


where are you setting the FlexboxLayout’s ‘flex-direction’? I have mine like this:

.column {
  flex-direction: column;
  flex-wrap: nowrap;

but you can do it outside the CSS with camelcase flexDirection iirc


setting css doesnt do anything. I suspect its the injection thats causing problem