FxFlex not working when using *ngFor

[whispertante]

Bug Report

What is the expected behaviour?

I have this layout with flexbox directives:

<div fxLayout="row wrap">
  <div class="p-1" *ngFor="let addon of addons" fxFlex="33">
    <div>{{ addon.name }}</div>
  </div>
</div>

It should give each addon a width of 33% and wrap 4+ addons into the next line.

What is the current behaviour?

It is instead not wrapping and shows all addons in 1 row. The fxFlex="33" is ignored. When I use pure flexbox HTML/CSS for this case, it works as expected:

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .addon {
    width: 100%;
  }
  @media (min-width: 768px) { 
    .addon {
      width: 33%;
    }
  }
</style>

<div class="container">
  <div class="addon p-1" *ngFor="let addon of addons">
    <div>{{ addon.name }}</div>
  </div>
</div>

What are the steps to reproduce?

Providing a StackBlitz (or similar) is the best way to get the team to see your issue.

• StackBlitz starter using the latest npm nightly release:

What is the use case or motivation for changing an existing behaviour?

Which versions of Angular, Material, OS, TypeScript, and browsers are affected?

Angular: 17.1.1 @ngbracket/ngx-layout: 17.0.1 tslib: 2.5.3

Is there anything else we should know?

In my example, addons is empty at page load and loaded afterwards.

[DuncanFaulkner]

@whispertante thanks for reporting the issue - I'm looking to update to 17.1.1 shortly. I will check to see if this an issue with 17.0.1 or whether it has been introduced in 17.1.1 - either way will look into fixing it

[whispertante]

@DuncanFaulkner I just downgraded to Angular 17.0.1 and there *ngFor is working.

[DuncanFaulkner]

Ok looks like a recent change to angular might have caused the issue, will check

[walterkarabin]

Hey @DuncanFaulkner I am also experiencing this issue. I am currently running 17.2.2, will you be making a fix for this?

[DuncanFaulkner]

@walterkarabin sorry been tied up with a number of other things just recently and just not got round to looking into it, now 17.3 is out (and probably that's the last up date before 18 is released), I need to upgrade to 17.3 (locally) and find what's going on and then work on a fix.

[walterkarabin]

@DuncanFaulkner Awesome, thanks for the reply! Any idea of a timeline as to when you will be working on that? Appreciate your help.

[DuncanFaulkner]

@walterkarabin soon I've been preoccupied with other priorities recently, but should be back on the case

[DuncanFaulkner]

@walterkarabin @whispertante I've been looking into the issue, and I just want to understand and see the problem, I've created a new stackblitz project as the one created by @whispertante seem to be using @angular/flex-layout and version 13 of Angular.

If you can use this project and show the issue then that would help me

Stackblitz-project

Thanks Duncan

[walterkarabin]

Hey @DuncanFaulkner, I was able to reproduce the issue please see the stack blitz: Flex-layout-bug (forked)

When using a selector for another component this seems to be where the fxFlex breaks down: <app-page style="outline: 1px solid green; padding: 2px" [data]="addons" fxLayout="row wrap" fxLayoutAlign="space-evenly"></app-page> I declare the selector with an fxLayout of row wrap and fxLayoutAlign of space-evenly

Am I correct in understanding that the selector should act as the container for its children? In other words, the styling of the selector should affect everything inside of it?

Thanks, Walter

Edit:

The issue is not with the ngFor... It has been hiding inside of the ngFor which is why I believed it was the case. Something else is causing it to break. The above forked project works as intended.

@DuncanFaulkner I will try and reproduce the issue I am experiencing. Any tips/ways of debugging or understanding which components are getting affected by the flex directives other than the visual changes?