This repository was archived by the owner on Jan 6, 2025. It is now read-only.
This repository was archived by the owner on Jan 6, 2025. It is now read-only.
Simplify gdColumns use #1161
Closed
Description
Proposal
What is the summary of the proposal?
Setting gdColumns is verbose and only works on page reload, if the page is resized it will keep the same grid.
gdColumns="auto" gdColumns.xs="auto" gdColumns.sm="auto" gdColumns.md="auto auto" gdColumns.lg="auto auto auto" gdColumns.xl="auto auto auto"
gdColumns.lt-sm="auto" gdColumns.lt-md="auto auto" gdColumns.lt-lg="auto auto auto" gdColumns.lt-xl="auto auto auto"
gdColumns.gt-xs="auto" gdColumns.gt-sm="auto" gdColumns.gt-md="auto auto" gdColumns.gt-lg="auto auto"
I found a directive that works* more simple but make use of MatGridListModule
https://stackoverflow.com/a/55407217/2513972
I figure out how to modified it to work only with flex-layout but only I make it work with a component.
I am sharing a functional example: https://stackblitz.com/edit/angular-nfng3n
I find some directives can set attributes in other directives implementation, the stackoverflow example do just that, and I do like do the same thing with flex-layout to have a more reusable directive, example:
<div fxLayout="row" fxLayoutAlign="space-between none" fxLayoutGap="4px" [appResponsiveColumns]="{xs: 'auto', sm: 'auto', md: 'auto auto', lg: 'auto auto auto', xl: 'auto auto auto'}">
And the appResponsiveColumns directive take care of update gdColumns attribute