Angular Material Grid 🔲 (Example)

Angular 2+ Material Grid

When building SPA (Single Page Application), there is really big chance you will run in to “Grid” issue. It can be some kind of dash board, it can be pinteres like grid, or just contact cards. I think there is no silver bullet. Way to go is flex for shure, but when you already utilising Material, you can use mat-grid-list. And this article will be about it.

Material Grid List

Grid lists are great, because can help improve the visual comprehension of the content. Mat-grid-list is a two-dimensional list view that arranges cells into grid-based layout. If you know angularjs data grid called UI Grid this is similar. A grid list consists of cells in vertical and horizontal layout. Grid lists are great, because can help improve the visual comprehension of the content.

Example

In this example we will try to create simple grid demo as is in Material documentation.

Angular 2+ Material Grid

We should start with importing necessary modules in app.module.ts:

Next thing we need to do is create tiles model in app.component.ts:

Now we can display our tiles in our template (app.component.html):

And that’s it! Whole example is taken and edited from official Material Grid documentation, where you should continue for more informations.

And of course here is the whole plunker:

Related Post

Convert HEIC to JPG on Right Click for Free Convert HEIC to JPG on Right-Click In iOS 11 Apple is replacing the JPEG image format with the new HEIC alternative. But what to do when device or p...
Free Better Battery Stats and Time Remaining for M... Better Battery Stats and Time Remaining for Mac OS TL;DR; Do you miss the time remaining indicator on your MacBook, MacBook Air, or MacBook Pro? He...
MacBook wifi issue – OS X keeps reconnecting Last few weeks I was facing annoying wifi problems. My mac was reconnecting every 5 minutes. On top of that BSSID was reseting so I saw BSSID changing...
Convert HEIC to PNG on Right Click for Free Convert HEIC to PNG on Right-Click In iOS 11 Apple is replacing the PNG image format with the new HEIC alternative. But what to do when device or pr...
PPTP VPN on MAC OS X Sierra, High Sierra and Mojav... PPTP VPN for Mac OS X Introduction PPTP VPN is no longer supported on macOS Sierra and High Sierra and that is just fine, because there are some se...
Right Click to Create New File on Mac OS X TL;DR; Windows has a lot of cons but it has also some pros. One of them is a smooth way to create empty file on right-click. Mac OS doesn't come with...
Buy me a coffeeOut of coffee 😱, please help!