Angular Flex-Layout

Flex layout is a package made for angular to use CSS flexbox features. The flex layout is used to display the elements within the flexbox container to be automatically arranged based on the parent container. Flex layout is used for building a layout structure. In this blog, we will be learning how to use angular flex layout module and its features.


Install the flex layout package with npm/yarn in your angular project.

$ npm i @angular/flex-layout

And add FlexLayoutModule into your AppModule.

Flex Layout

Let’s get started with flex layout features and how to use it and their properties.

  1. fxFlex

The fxFlex should be used on the element within the flexbox container. The fxFlex is used to resize the element based on the parent container. The fxFlex supports two usage long-form and short-form.

  • Long-form 
<div fxFlex="<grow> <shrink> <basis>"></div>
  • Short-form 
 <div fxFlex="<basis>"></div>

The flex basis value can be percentages, pixels, em, vm, vh, calcs.


<div fxFlex="20"> … </div>
  1. fxLayout

The fxLayout is used to specify the direction of the elements inside the flexbox container. Shown below are the property values of fxLayout.

  • row – Default value, the elements are displayed horizontally, as a row.
  • row-reverse – Same as the row, but in reverse order.
  • column – The elements are displayed vertically, as a column.
  • column-reverse – Same as the column, but in reverse order.
  • fxLayout + wrap – Specifies that the elements will wrap if necessary.

Note: when using the wrap, must first specify the layout direction.


<div fxLayout="row"> … </div>

<div fxLayout="row wrap"> … </div>
  1. fxLayoutGap

The fxLayout is used to specify the margin gaps on elements within the flexbox container. Shown below are the default mode of fxLayout.

  • margin-right is used when the flexbox container flex direction is a row.
  • margin-bottom is used when the flexbox container flex direction is a column.

Note: The last child element will not have the margin gap only the inside gap are specified.


<div fxLayoutGap="20px"> … </div>
  1. fxLayoutAlign

The fxLayoutAlign is used to align the elements inside a flexbox container. Shown below are the property values of fxLayoutAlign.

  • strat or flex-start – Default value, the elements are positioned at the beginning of the container.
  • end or flex-end – The elements are positioned at the end of the container.
  • center – The elements are positioned at the center of the container.
  • space-around – The elements are positioned with space before, between and after the lines.
  • space-between – The elements are positioned with space between the lines.
  • space-evenly – The elements have equal space around them.


 <div fxLayoutAlign="space-between center"> … </div>
  1. fxFlexOffset

This should be used on the element within the flexbox container. This is used to specify the margin-left to the elements within the flexbox container.


<div fxFlexOffset="20px"> … </div>
  1. fxFlexOrder

This should be used on the element within the flexbox container. This is used to specify the order for the elements inside the flexbox container.


 <div fxFlexOrder="2"> … </div>
  1. fxFlexFill

The fxFlexFill is used to maximizes the height and the width of the elements inside the flexbox container.


<div fxFlexFill> … </div>
  1. fxShow and fxHide

The fxShow and fxHide is used to show/hide the element based on the value passed to it.


<div fxHide="true"> … </div>

Responsive Layouts

The responsive layouts are used to apply different layout styles for different viewport sizes and display devices.  This can be used by combining breakpoints with fxLayout features. Some of the breakpoints are xs, sm, md, lg, xl for more reference responsive layouts.


<div fxHide.xs="true"> … </div>


Feeling stressed ?

Feeling stressed? Absolutely you would have felt or might feel it in the future. No one can say that “I am leading a stress-free life”. So, let us understand about its flavours and how to manage it.

Everyone faces stress from time to time. People respond differently to emotions and events that may be causes of stress. For example, will say Introverts and extroverts. Both may experience the same causes of stress, but the response will be in different ways.


An extrovert tends to respond with

  • Anger
  • Impulsive actions such as: 
    • Screaming
    • Throwing objects
    • Hitting

An introvert tends to respond

  • Inwardly
  • Screaming silently at himself
  • Suffering inner anxiety
  • Depression.

        “It’s not the stress that kills you, it is our reaction to it”


Stress comes in two flavours:

  • Eustress
  • Distress

Eustress is your body’s response to positive, happy emotions and events.

Distress is your body’s response to negative, upsetting emotions and events.



And here are some tips to manage stress, have a look at it :

  • Keep a positive attitude always.

  • We need to assert our feelings, opinions, or beliefs instead of becoming angry, defensive, or passive (i.e) be assertive instead of aggressive.

  • Learn to “Say No”  to requests that would create excessive stress in our life. Set your limits.

  • There are some events or situations that we cannot control and we should accept it.
  • Eat something or chew gum. Science has shown that chewing something or eating lowers the stress.
  • We should learn and practice some relaxation techniques like meditation or yoga.

  • Walk away from your computer. Make sure to shut it off 1 hour before you fall asleep.
  • Have a stress ball at your work desk. We should use it whenever stress tries to test us.

  • Spend some time for hobbies, interests, else play with kids which would definitely reduce your stress.
  • Cuddle something. Oxytocin also called cuddle hormone get released when we spend time with others.
  • We should learn to manage our time more effectively.

  • Watch some funny videos or go for a walk.

“May be we cannot live a stress-free life,

but we can try to free us from stress”


Insights on code reviews

“Anybody can write code if he learns programming. But what makes him stand out of the crowd is the quality of the code”. Yes, the way you write and construct the code defines you as developer. Before anything else, how many of us feel to read another person’s code? How do we feel looking into our own code post 6 months ? There might be some suggestions that pops in our mind like, “Oh! I would have written like this/that”, which you would have never thought during coding that piece of code. Likewise, there may be some suggestions by our peers that could improve your code, which people name it as “Code review”. People often fail to understand the purpose of code review. We have cultivated a habit of code review as nitpicking. Ofcourse, it is partly yes! But the main purpose according to me is to share the knowledge and enhance the quality. Let’s dig deeper into it.

I still remember the first time when I was given an opportunity to review a code. I didn’t have a clear checklist or flow to review a code. But I had a few vague points(do’s and don’ts) which I learnt through the experiences of my projects. I started noting it down and framed my own checklists and reviewed. After my maiden review, whenever I code, I started following my own checklists. That’s when I realized, how could these checklists make a huge impact on the quality of the code. Believe me or not, each time when you do a code review, it enlightens us in one way or another !

When do you think your code is good to go ?

Well, it depends on who reviews it. When you go to a peer, he/she will have her own criteria. When it comes to another person the criteria will vary, where one focuses on formatting while the other doesn’t. This will lead to inconsistent feedback. Instead, we must have a common checklist/criteria in your organization which are open to developers and reviewers. In Squashapps, we have a set of 10-15 criterias and developers check those before submitting for the review. This would be good approach to be followed as it saves time and this also lets developer’s know what to be focussed on while coding.

Automate your work !

When you know what your organization needs as a quality check, you can automate them. We can use few plugins like ESLint, which will alert you from writing stupid codes. If a pattern of your code is already reviewed, you could create a reviewed template on your own and use it for further development like the one given in this link: .

Don’t make the code review a nightmare!

It is always better to have a small code reviews. Yes, I do understand the fact that some features may have lesser codes while some may have a week or a month’s work. In the case of a week or a month’s work the code gets piled up which may lead to more review comments. This will become a nightmare for both reviewers and developers. When it comes to bigger features, it is always better to do a frequent small releases. This will make the other developers to get the updated code and also reduce the merge conflict to an extent.

There are three points of time, where a code can be reviewed:

  1. During implementation
  2. When code is ready to merge
  3. After code is merged

During implementation:

Reviewing with your team mate or any colleague while developing a feature, will make you get ideas from a different perspective. Here is were pair programming dives in. This will not only helps you to find bugs in your flow, it also increases the bus factor. Else the code will be known only by one developer in your team and this may lead to may issues. Pair programming helps us to get different solutions to the same, where we can have options to choose the best approach.

When code is ready to merge.

In this stage the code is reviewed by a gatekeeper like a senior developer, who is assigned to approve/decline the code to push to production.

After code is merged.

We all may think, why do we review after merging? As I said earlier, reviewing is not only finding bugs in the code, it also means to share knowledge and get feedback. In this stage of reviewing, the customers/clients checks whether the code is understandable by them.

How comments play an important role in code review ?

When it comes to reviewing of a small part in a big feature, the reviewers might not know what are all you have accomplished. To make your code speak and make it self-documented, it is good to add comments like :

// This function may fail if transportMode==Train, but there are currently no 

// documented requirements or data for Trains, so there's no way to reliably test it.

function sampleFunction (transportMode) {

// Some code


You could also add your thought process describing why you have chosen an approach instead of other approach. So the reviewer might know, that you have thought about the other approaches too.

Submitting for a review:

It is our prime responsibility to sync up with the reviewers in a periodic time. Once you have submitted the code, there might be further feedback or declining of code. The code has to go under some process or iterations to meet the level of standards and to push to production.

Hope you guys got something from my writing to improve the code quality.

Happy coding!

Inspired from :