Skip to content
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
Closed
@romelgomez

Description

@romelgomez

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions