CODEWITHSUNDEEP
angularmaterial-designangular-material2
Geek
Geek

Reputation: 653

angular material bootstrap like grid mat-grid-list

I am trying to achieve Bootstrap style responsive screen using angular 2 and angular material.

Consider this example : https://getbootstrap.com/docs/4.0/examples/album/ when we resize the window the thumbnails start stacking.

I am using angular material using mat-grid-list and I want to achieve the same behavior.

https://stackblitz.com/angular/oalnrrygvga?file=app%2Fgrid-list-dynamic-example.html

Material documentation regarding responsive layout grid define:

The number of columns displayed in the grid is determined by the breakpoint range (a range of predetermined screen sizes) at which a screen is viewed, whether it’s a breakpoint for mobile, tablet, or another size

1) So what needs to be done to achieve the same result in angular material as that of bootstrap

I found a solutions : Responsive Design using md-grid-list in angular 2

Here they are using either non angular material library or using window size event. If material is supposed to be responsive we shouldn't be needing to do that.

So can some one please help me out how to get it done in purely material way .

Please see: I am beginner in front end design so I don't know lot jargons from UI world.

Thanks

Upvotes: 1

Views: 4209

Answers (1)

G. Tranter
G. Tranter

Reputation: 17918

Angular Flex-Layout provides this functionality in an "Angular" way. See Displaying multiple grids in angular material for details.

Upvotes: 1

Related Questions