Updated March 30, 2023
Introduction to Angular Material Grid
In angular material, we have a grid used to create the list of columns with different sizes; we can create a grid list and show our data. In order to use this grid inside the application, we have to make small configurations in the existing one; also, we should have material already added into our application else it will not work. While creating a grid, we have to specify its cols attribute, which is responsible for creating the number of columns in the grid; after this, we can change the grid by setting values to the different attributes, like height fir etc.
Syntax of Angular Material Grid
The syntax which will create grid for us by specify the attributes required.
<mat-grid-list cols="number of columns" >
<mat-grid-tile
*ngFor="let tile of tiles"
[colspan]="tile.cols"
[rowspan]="tile.row"
</mat-grid-tile>
</mat-grid-list>As you can see, we are using the ‘mat-grid-list’ directive to create the grid; we have to specify the ‘cols’ in order to create it.
<mat-grid-list cols="5" >
<mat-grid-tile>
</mat-grid-tile>
</mat-grid-list>How does Grid work in Angular Material?
As we have seen, this grid is used to create the grid layout in angular material; we also need some modules that need to be imported inside the application to use this. These modules are the part of the martial library, but we have to explicitly import them in order to use them.
Let’s see with the configuration which is required to make this run:
1. MatGridListModule
This is the module name which is required to be import inside the application. It is present inside the angular/material. Also, we can import this inside the root module or any other child module in which it is required.
import {MatGridListModule} from '@angular/material/grid-list';This whole line can be used as it is in the code to import it; also, we have to define the module inside @Ngmodule to use it further.
2. MatGridList
Now we have the ‘MatGridList’ directive, which contains the selector as ‘mat-grid-list’; this can be used on the HTML or TEMPLATE we have. This directive is responsible for showing the grid layout in our project or the application.
<mat-grid-list cols="5" rowHeight="150px">
</mat-grid-list>As you can see above is the sample syntax to create our own grid layout using the material.
Below is the step to setup the angular material in the project:
1. First, install the Angular CLI, which enables us to download the required packages and library for our project.
You can download it by typing the command below on your command to ensure you have already installed the node.
Code:
npm install -g @angular/cli)The above command will install the CLI globally in our system; hence we can use it globally when required.
2. Now, in this step, we will try to create the new angular project from scratch; this project will not be a material project that we have to add later by installing the material dependency inside our project. So just execute the below command on your Command Prompt and press enter.
Code:
ng new your project name
>> ng new my-first-projectThis command will create the project with the name my-first-project; you can create your project with any name mentioned.
3. Just to make sure, try one command mentioned below to install all the required library into our project.
Code:
npm install4. Now, you can test and run your project by typing the simple command which is mentioned below. This is just to make sure that we are on the right track and our project has been created without any error or bugs inside it.
Code:
ng serve5. Go on browser and try to run the application with the below URL:
Example:
http://localhps:4200
By default, the angular project run on the port 4200; you can change it as per your need if required.
6. Now everything is set; we have our angular project now; we will add the material library to our project just by running the below command on the command prompt.
Code:
ng add @angular/materialExample of Angular Material Grid
Given below is the sample example to show how to create grid using material module easy and fast:
module code:
import {NgModule} from '@angular/core';
import {MatGridListModule} from '@angular/material/grid-list';
@NgModule({
exports: [
MatGridListModule
]
})
export class DemoGridModule {}index.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
<title>Grid demo in angular material</title>
</head>
<body class="mat-app-background">
<grid-demo>Loading</grid-demo>
<span class="version-info">Current build: 12.1.0</span>
</body>
</html>Conclusion
Angular material grid makes the development fast; just by adding the tag, we can use it. Moreover, it has some attributes which help us to create the grid. Also, we have seen which module needs to import in order to use it.
Recommended Articles
We hope that this EDUCBA information on “Angular Material Grid” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
