Angular Material - Ampersand Tutorials

Quickly implement Responsive CSS Grid in Angular Material in 2 Mins

02/11/2021

by Dinesh Kumar R with No Comment Angular

Learn Responsive CSS Grid in Angular Material

n this tutorial, you will learn how to incorporate simple responsive CSS Grid Layout using a framework called Materialize CSS in Angular Material.

We write this tutorial, with the understanding that you have created an Angular Project and Angular Material version 6.2.1. If you are new to Angular and Angular Material, you must first learn about creating an Angular project and installing Angular Material in the same project. Currently, there is no proper grid layout in Angular Material. FlexLayout is one way to achieve Grid Layout. Here, we will discuss how to create a Grid Layout using Materialize CSS.

We have forked the CSS components such as Grid, Helpers, Typography from the Materialize CSS website. You can download the forked file at the link given below. In order to learn how the Materialize CSS Grid functions, follow this link: Materialize CSS Framework.

Download CSS

Once you have downloaded the forked Materialize CSS file, you will have to paste it into your src folder of Angular Project. The next step is to import the downloaded Materialize CSS forked file in the global stylesheet – style.css.

The code for doing it is:

@import "m-modified.css";

Add M-Modified CSS in Style CSS — Style CSS

Once you have included the above code in your style.css, you are all set to utilize the grid structure of Materialize CSS framework.

Walkthrough of how grid in Materialize CSS grid works:

The grid system in Materialize CSS framework works via rows and columns. For creating a row in Materialize CSS, you must create a division with a row as a class.

<div class=”row”></div>

The above code will create a row. Ideally, a single row will have 12 columns. Now, to create 2 columns in large and medium-size devices, use the following code:

<div class=”row”>
<div class=”col m6”> </div>
<div class=”col m6”> </div>
</div>

To make each column occupy entire row in small devices, use the following code

<div class=”row”>
<div class=”col m6 s12”> </div>
<div class=”col m6 s12”> </div>
</div>

To create three columns of equal width and occupying the entire row and all these columns to occupying entire row in small screens, use the following code:

<div class=”row”>
<div class=”col m4 s12”> </div>
<div class=”col m4 s12”> </div>
<div class=”col m4 s12”> </div>
</div>

You can also understand how the grid system works from Materialize CSS website. Once you have created columns according to your requirement, you can include all the necessary components such as forms, buttons, cards, lists inside each division.

<div class="row">
   <div class="col m4 s12">
      <h3>Column 1</h3>
   </div>
   <div class="col m4 s12">
      <h3>Column 2</h3>
   </div>
   <div class="col m4 s12">
      <h3>Column 3</h3>
   </div>
</div>

Once you have completely understood the grid structure, you can play around and create responsive grid layouts in Angular Material. Now that you have learnt how to implement Responsive CSS Grid in Angular Material, You can also learn about Scrollable Table in Angular Material.

Implement Scrollable table in Angular Material with 2 easy steps

28/10/2021

by Dinesh Kumar R with No Comment Angular

Learn how to make Scrollable table in Angular Material

In this tutorial, you will learn how to make a table with a large number of columns less cramped and make the table scrollable based on the number of columns we add to the table.

We write this tutorial with a presumption that you already know to create a basic table in Angular Material. If not, please follow the link given below.

https://material.angular.io/components/table/overview

Make sure you import all the necessary components in the app.module.ts and have created the fundamental table.

One may likely have more than 15 columns in a single table on a project. When that happens, Angular Material by default compresses the column width and make it congested to accommodate the viewport width.

It is nearly impossible to increase the column width or to make the table horizontally scroll to accommodate all the columns with relaxed spacing. There is no native fix in Angular Material for this. We have fixed it with a simple CSS trick.

All that you have to add the following CSS in style.css and call that class in a division. The class which we have added is table-responsive. However, you can rename it according to your preference.

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  .mat-table {
      width: 100%;
      max-width: 100%;
      margin-bottom: 1rem;
      display: table;
      border-collapse: collapse;
      margin: 0px;
  }
  .mat-row,
  .mat-header-row {
      display: table-row;
  }
  .mat-cell,
  .mat-header-cell {
      word-wrap: initial;
      display: table-cell;
      padding: 0px 5px;
      line-break: unset;
      width: auto;
      white-space: nowrap;
      overflow: hidden;
      vertical-align: middle;
  }
}

You can copy and paste the above CSS in your style.css / style.scss file. Now create a fundamental table in any of your components. Now create the division with class, ‘table-responsive’. Now cut the table and paste it inside the division. This will enable you to create a table with more spaced and horizontally scrollable. The following is the code on how it appears in your HTML file. We have successfully made Scrollable table in Angular Material.

<div class="table-responsive">
<table mat-table [dataSource]="dataSource">
<!-- Your Columns Here !>
</table>
</div><div class="table-responsive">
<table mat-table [dataSource]="dataSource">
<!-- Your Columns Here !>
</table>
</div>

Now that you learn the Scrollable table in Angular Material. You can check out the tutorial on Getting Started with Materialize CSS

Ampersand Tutorials

Posts tagged: Angular Material