<div [fxLayout]="fields.layoutConfig.layoutDirection + ' wrap'" fxLayout.xs="column"
[fxLayoutGap]="fields.layoutConfig.fxLayoutGap">
<ng-container [fxFlex]="50" *ngFor="let field of fieldsponentConfig;" 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
<div [fxLayout]="fields.layoutConfig.layoutDirection + ' wrap'" fxLayout.xs="column"
[fxLayoutGap]="fields.layoutConfig.fxLayoutGap">
<ng-container [fxFlex]="50" *ngFor="let field of fields.ponentConfig;" 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./angular/flex-layout/issues/1046 https://github./angular/flex-layout/issues/381
Share Improve this question edited Apr 30, 2020 at 14:42 San Jaisy asked Apr 30, 2020 at 12:12 San JaisySan Jaisy 17.2k43 gold badges205 silver badges346 bronze badges3 Answers
Reset to default 4you shouldn't use property binding for fxLayout
and fxLayoutGap
.
I had the same issue with
<ng-container fxLayout="row" fxLayoutAlign="right">
by changing <ng-container>
into a <div>
the error was gone...
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.ponentConfig;">
<ng-container reactiveField [field]="field" [group]="form"></ng-container>
</div>
</div>