responsive flexLayout example

[maku]

It would be really great to have an example / demo where flexLayout is used (e.g. responsive -> row based with wrap and a flex value which is based on the screen size).

e.g. code without od-virtualscroll

  <div fxLayout="row" fxLayoutWrap="wrap">
    <div fxFlex="25" fxFlex.md="33" fxFlex.sm="50" fxFlex.xs="100" *ngFor="let item of items" style="padding: 2px;">
         <my-component [item]="item"></my-component>
    </div>
  </div>

I have not really an idea how to code something like this with od-virtualscroll....

[dinony]

I think I had an example with angular/flex-layout at some point, but I cannot find it anymore.
Anyway, I will try to provide an angular/flex-layout example, since it seems to be used quite often :)

/cc @buu700 Aren't you using angular/flex-layout?

[buu700]

Yep, this is what my code looks like:

od-virtualscroll, od-virtualrow, .od-scroll-container {
	width: 100% !important;
}

public readonly items: Observable<Item[]> = ...;

public readonly vsOptions: Observable<IVirtualScrollOptions>	= of({
	itemHeight: 123,
	numLimitColumns: 1
});

public vsEqualsFunc () : boolean {
	return false;
}

<div fxFlexFill fxLayout='column'>
	<od-virtualscroll [vsData]='items' [vsEqualsFunc]='vsEqualsFunc' [vsOptions]='vsOptions'>
		<ng-template let-item>
			<my-component [item]='item'></my-component>
		</ng-template>
	</od-virtualscroll>
</div>

That's pretty much equivalent to @maku's example except if the ngFor were *ngFor='let item of items | async' and without the responsive part. I haven't had any issues with the flex-layout responsive features being used by ancestors of my virtualscroll component, so that of the example should be easily adaptable here as well.

[dinony]

Thanks @buu700! Could you get it working @maku? I'm thinking of adding a clone of static example using the flex lib.

[maku]

@dinony @buu700 Does not work for me. I created a little example app (https://stackblitz.com/edit/angular-vscroll) where I show 2 variants (with and without od-virtualscroll) Maybe you can look at it...) TIA

[dinony]

First thing I've noticed is the operator: from([1,2,3]), which produces an observable of numbers (Observable<number>). Instead you need: Observable<any[]>.

[maku]

@dinony it is an Observable of objects which is created from an array....

[dinony]

Yep, the objects themselves need to be arrays.

[maku]

@dinony I don't get it. I don't think that the observable is the problem. The current state works in some sense (e.g.when you resize the window, you see the items. BUT not in a virtualized way)

[buu700]

Actually, I'm running into the only-display-on-resize issue as well (along with some other issues like items being rendered with invalid positions). I do have one instance where everything works perfectly with no issues, so I'm currently working on figuring out what's different about that one.

Edit: Nevermind. Apparently I actually already got this working and forgot, with the exception of two minor issues that I may create separate tickets for if I can't find anything obviously wrong on my end.

[dinony]

Ok, I've looked at your example. The problems I see (most of them are not on your side, sry for that) are the following:

• Afaik, angular/flex-layout does not support inline-flex (see issue) as used in this basic example (check the .cell css).
• You want to use dynamic sizing via fxFlex for a cell, which would require to emit new options on the options$ observable, which is not implemented yet (see issue), but will definitely be implemented in future.
• data$: Just to clarify on the operator of vs from

// Observable.from([1,2,3])
-----1---2---3--|->

// Obervable.of([1,2,3])
----[1,2,3]------|-->

The component expects arrays as emitted values, so that's what I meant.

Nethertheless, I've forked your stackblitz and adapted it to get a working version. I'll let you know when the dynamic sizing is implemented and follow the angular/flex-layout issue to get updates on that.

[buu700]

You want to use dynamic sizing via fxFlex for a cell, which would require to emit new options on the options$ observable, which is not implemented yet (see issue), but will definitely be implemented in future.

Actually, fxFlex works as expected when forcing the width to be 100% as in my original example. The reason it wasn't working was because he'd put the rule into the component stylesheet without ::ng-deep; adding ::ng-deep or moving it to styles.css fixes it. Instead of setting the width through vsOptions, you can omit the width and set numLimitColumns: 1.

See: fork of your fixed version, fork of the original version (which still suffers from the other issues mentioned).

[dinony]

@buu700

• What do you mean by the other issues?
• fxFlex: No, as maku wants to use it, fxFlex will not work as expected in a grid setup. fxFlex will change the cell size depending on the screen size and if the scroll component does not know of the changed cell size it will not work. Currently, it simply cannot via $options, but it will be supported in future.
• numLimitColumns: 1 is not what maku seems to want, since he showed a grid setup in his stackblitz.

Ok, since this is not a bug report, but more a lack of feature, which is already covered here, I will close this one. Feel free to open up, if I overlooked something.

[buu700]

Ah, got it. I just assumed he wanted a single-column list based on the example, but I only tested it squeezed into the small StackBlitz sidebar.

What do you mean by the other issues?

I meant that my fork of @maku's example to use fxFlex + single-column didn't address the "only displays after resize" or "renders entire list non-virtually" as yours did.

[dinony]

Everybody using angular/flex-layout. Check the open issue: you have the chance to actively propose how inline flex could be added to the current API.