Responsive Design in Angular

Angular is popular framework for front end and it is one of the best modular framework. Due to the modularity Angular is very flexible and it is easy to maintain for large scale application and that is why it is used in Enterprise application. But how we do responsive design for large scale application which is built on Angular, there are couple of options are available. But I will give you one of the best way to create responsive design in Angular.

Introduction

To create responsive design we can create Angular default responsive engine or else we can use some responsive css framework or responsive gird systems. So among them we will use primeflex to create responsive design in Angular. So what is primeflex, primeflex is a responsive design utility by which we can create responsive design and which come from primeNG Library.

Primeflex is standalone package that is not coming from primeNg modules, it is separate package which only provide the responsive flexbox and css gird system in order to responsive design unlike other library bootstrap or angular material, if you import those css then you will their css which can change the other components css in the UI.

Installation & Setup

To install the primeflex just use this following command.

npm install primeflex / yarn add primeflex

So after the installtion we need to use only primeflex responsive grid sysem, not the entire theme. So that if we need to use any other themes like Angular Material theme or Angular bootstrap themes then we can able to use those themes.

So now you need to primeflex.css from node_modules in angular.json file in style array.

just add this line “node_modules/primeflex/primeflex.css” in the styles array, given below.

 "node_modules/primeflex/primeflex.css",

Now you all set to use primeflex flexible responsive grid system which will work with CSS Flexbox or CSS Grid layout in behind and it is easy to use it.

Breakpoints

As we know unlike every other grid system in here we have some breakpoints are availables and those are given below.

$sm Breakpoint of screens such as phones. 576px
$md Breakpoint of screens such as tablets. 768px
$lg Breakpoint of screens such as notebook monitors. 992px
$xl Breakpoint of smaller screens such as desktop monitors. 1200px

Grid System

So we know the breakpoints and now we will use this classes in order to design the responsive grid system. So there are various grids we can design based on the breakpoints and those are given below.

Equal Size Grid

So in eual size grid, each and every equal size, so every grid having same size. So to implement it we need to use this following code.

<div class="grid">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
</div>

Equal Size Grid

12 Column Grid

in 12 column grid we can design the gird upto 12 column in a particular row, So in this example we will distribute the 12 columns in those number correspondingly [2,6,4].

<div class="grid">
    <div class="col-2">2</div>
    <div class="col-6">6</div>
    <div class="col-4">4</div>
</div>

12 column grid

MultiLine Grid

So when the number of columns exceed 12, columns wrap to a new line and it will become multiline grid.

<div class="grid">
    <div class="col-6">6</div>
    <div class="col-6">6</div>
    <div class="col-6">6</div>
    <div class="col-6">6</div>
</div>

Fixed Width Column

A column can have a fixed width while siblings or other Columns can have auto width. Apply col-fixed class to fix a column width.

Responsive Grid System

Responsive gird system we can achive by using the breakpoint classes which we mentioned above. So if we use those classes then we can do responsive design based on the screen sizes. So we have given below how to use those classes and create a responsive design.

<div class="grid">
    <div class="col-12 sm:col-6 md:col-6 lg:col-3 xl:col-3">A</div>
    <div class="col-12 sm:col-6 md:col-6 lg:col-3 xl:col-3">B</div>
    <div class="col-12 sm:col-6 md:col-6 lg:col-3 xl:col-3">C</div>
    <div class="col-12 sm:col-6 md:col-6 lg:col-3 xl:col-3">D</div>
</div>

Conclusion

So here we have very details explanation of Angular Responsive design using primeflex. If you use this grid systems then you can design responsive design very easily, not only that it will give you lots of css helper classes that you can use it in your project. One of the benefit of primeflex that it is standalone and it will not create any side effect with other css framework like bootstrap or Angular Material etc. So primeflex is one of the best framework for angular to do responsive design.