'Cannot read property 'setProperty' of undefined fxFlex issue with ng-container Angular 9 Flex Layout

<div [fxLayout]="fields.layoutConfig.layoutDirection + ' wrap'" fxLayout.xs="column"
    [fxLayoutGap]="fields.layoutConfig.fxLayoutGap">

    <ng-container [fxFlex]="50" *ngFor="let field of fields.componentConfig;" reactiveField [field]="field" [group]="form">
    </ng-container>

</div>

Trying to use the [fxFlex]="50" inside the container getting an error Cannot read property 'setProperty' of undefined

Some of the issues https://github.com/angular/flex-layout/issues/1046 https://github.com/angular/flex-layout/issues/381

Solution 1:^[1]

you shouldn't use property binding for fxLayout and fxLayoutGap.

Solution 2:^[2]

I had the same issue with

 <ng-container fxLayout="row" fxLayoutAlign="right">

by changing <ng-container> into a <div> the error was gone...

Solution 3:^[3]

Bind the container inside the <div>

<div [fxLayout]="fields.layoutConfig.fxLayout + ' wrap'" fxLayout.xs="column"
    [fxLayoutGap]="fields.layoutConfig.fxLayoutGap"
    [fxLayoutAlign]="fields.layoutConfig.fxLayoutAlignHorizontal + ' ' + fields.layoutConfig.fxLayoutAlignVertical">
    <div [fxFlex]="fields.layoutConfig.fxFlex" *ngFor="let field of fields.componentConfig;">
        <ng-container reactiveField [field]="field" [group]="form"></ng-container>
    </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Totati
Solution 2	Jules
Solution 3

'Cannot read property 'setProperty' of undefined fxFlex issue with ng-container Angular 9 Flex Layout

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]