Updated March 31, 2023
Introduction to Angular material layout
Angular material provides a layout to create our component inside it; Layout is basically a directive which helps to show or represent the layout for its children. We basically have two types of layouts: flex and grid; angular material provides us inbuild module and directive to create this layout in our application. We all know about the grid layout, and it is very easy to create as well, by the use of a few configurations. We also have few properties that are used to assign the Layout values, and it is mainly as ‘row’ and ‘column’; we can set this parameter some value. Also, we can make the layout responsive by using the Layout property which it is provided. In the coming section of the tutorial, we will have a closer look at the implementation and what changes need to be made in order to run our application properly with detailed examples for beginners.
Syntax
As we know, the layout provides us many properties to be used on with the HTML tag, which makes them responsive; in this section, we will have a closer look at the syntax for both the ‘row’ and ‘column’. Let’s get started;
<div layout = "row" layout-xs = "column">
// define your component
</div>
<div layout = "column" layout-xs = "column">
// define your component
</div>As you can see in the above piece of syntax, we are trying to use ‘layout-xs,’ which is one of the property from the layout API in angular material. In the coming section of the tutorial, we will have a closer look at the implementation of this layout in detail for more clarity and understanding.
How to use layout in Angular material?
Now we already have an understanding of the layout in the material; it is used to make our application responsive; responsive means application UI will look the same on all the device screen sizes. In material, we have layout API, which provides us many preparty which can we used with the component to set their width and height. Basically, we have two components of layout which we will be going to use more often in this tutorial; let’s have a closer look at each of them see below;
1) column: By the use of this, we can arrange our items vertically, and by default they will have a maximum width of 100%; also, the height would be similar to the items we have in the container.
2) row: By the use of this, we can arrange the items horizontally, and by default they will have a max height of 100%, and the width would depend on the items we have in the container.
Now we will have a closer look at the different types of property provided by the layout API; in order to make the page responsive, let’s get started;
1) layout-xs: This is used to set the width of the component, which would be smaller than 600 px.
2) layout-gt-xs: This is used to set the width of the component, which would be greater than or equal to 600 px.
3) layout: It is used to set the default layout.
4) layout-xl: This is will set the layout with a default width greater than or equal to 1920px.
5) layout-gt-lg: This is will set the layout with a default width greater than or equal to 1920px.
6) layout-lg: use to set the layout with the width between 1280 and 1920px.
7) layout-gt-md: use to set the layout with the width greater than equal to 1280 px.
8) layout-md: use to set the layout with the width between 960 and 1280 px.
9) layout-sm: use to set the layout with the width between 600 and 960 px.
10) layout-gt-sm: use to set the layout with the width greater than equal to 960 px.
Now let’s get started with the steps that need to be taken in order to step up our angular material project initially for beginners; see below;
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 below command on your command make sure you have already installed node see below;
e.g. :
npm install -g @angular/cli) The above command will install the CLI globally in our system; hence we can use it globally when required.
3) 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 Promat, and press enter see below;
syntax:
ng new your project namee.g. :
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.
4) Just to make sure, try one command which is mentioned below to install all the required library into our project,
e.g. :
npm install5) Now, you can test and run your project by typing the simple command which is mentioned below. This is just to ensure that we are on the right track and that our project has been created without any errors or bugs inside it.
e.g. :
ng serve6) go on browser and try to run the application with the below URL :
e.g. :
http://localhps:4200By default, the angular project runs on the port 4200; you can change it as per your need if required.
7) 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;
e.g. :
ng add @angular/materialExample of Angular material layout
1) demo.layout.component.ts code :
<h5><u><i>Layout demo using Angular Material !!</i></u></h5>
<div id = "layoutContainer"
style = "height:100px;" >
<div layout = "row" layout-xs = "column">
<div flex class = "yellow compo">One</div>
<div flex = "20" class = "grey compo">Two</div>
</div>
<div layout = "column" layout-xs = "column">
<div flex = "33" class = "yellow compo">Three</div>
<div flex = "66" class = "grey compo">Four</div>
</div>
</div>2) demo.layout.component.css code :
mat-grid-tile {
background: rgb(13, 91, 117);
}
.compo {
color:rgb(21, 9, 192);
padding:10px;
text-align:center;
border-style: inset;
}
.yellow {
background:rgb(238, 208, 111);
}
.grey {
background:rgb(191, 191, 207);
}Output :
Conclusion
By the use of this, we can easily divide our page or UI into any number of small containers which can contain any data or component inside them; this component will be called a child component of the layout, this is easy to use, handle, and maintainable by the developers as well, hence recommended to have, also provide responsive screen on the other screen size, without making a lot of changes to the code.
Recommended Articles
This is a guide to Angular material layout. Here we discuss How to use layout in Angular material along with the examples and outputs. You may also have a look at the following articles to learn more –
