Implementing Flex Layout in Angular: A How-To Guide

Introduction

CSS Flex Layout is used to create flexible fluid layouts. However, when using Angular there are scenarios when we need more dynamic control over the layouts. Further, using CSS Flexbox requires complicated styling which can be hard for many developers. Flex Layout is a component engine that aims to solve this problem. It provides a set of directives that are available for implementation in your applications.

The Flex Layout uses Typescript making it ideal for Angular applications. No external stylesheets are needed, and different directives can be used to create responsive layouts. In this tutorial, we will create a simple Angular application and inject Flex Layout to arrange our components.

Let’s start!

Prerequisites

• Angular applications use Node.js runtime. To complete this tutorial, you will need to have Node.js installed on your development machine. We have a complete guide How To Install Node.js On Ubuntu 18.04 that will help you set up Node.js easily.

• You will also need to have some familiarity with using Angular components and setting up an Angular project.

Project Configuration

Here we need to perform two steps:

• We need to set up a new Angular application.
• We will need to install Flex Layout from npx so that we can import and use it in our application.

To create a new Angular application, open your terminal and run the below command:

Here we are creating a new Angular application using @angular/cli. Our application name is angular-flex-example. We will be using CSS rather than Sass or Less as styling. In addition, we will specify that we do not need routing. We are also not concerned with the tests, so we skip them as well.

Now that your application is ready, navigate to the application directory and run the below command to install Flex Layout:

Once the above command finishes the installation, add the below code in your app module to import FlexLayoutModule:

Next, run the below command to ensure that everything is running as expected:

Your application will be served on localhost:4200 by default. Navigate to this URL in the web browser. You will see the message: “angular-flex-example is running!. Having this setup complete, let’s design our template using Flex Layout.

Create the Flex Layout

Here we will be adding code in app.component.html to use the Flex Layout with FlexLayoutModule. Our final result would be similar to the figure below:

To achieve the above result, open the app.component.css in your editor and add the below lines of code:

Now that you have added the above code, open the app.component.html file and add the following code. This code has two container divs and five inner divs:

After that, compile and run your application. You will see five divs stacked on top of each other because we have not provided any layout until now. To add the fxLayout add the below code:

In the above code, after applying this fxLayout, CSS properties display:flex and flex-direction:row  styles are applied to the container divs. Now when you run the application, you will have three divs on the first row and two divs on the bottom row.

Next, we add fxLayoutAlign and fxLayoutGap to enhance our layout:

This will apply place-content: stretch center and align-items: stretch styles to the container div. It will also apply 10px of space between the flex items.

Now that we have applied fxLayout, it’s time to make our layout responsive:

This code will set the breakpoint for the extra small xs screens. The screen will change the layout from default row to column and the gap size will reduce from “10px” to “0px” in the extra small screens. You can test this by running the application and resizing the window to xs (less than 599px wide). You will observe the styling being changed.

For various screen sizes we have different suffices:

• sm  – small

• md  – medium

• lg  – large

• xl  – extra-large

We also have directives for child elements. Add fxFlex  as in the below code:

This will apply flex-grow: 1, flex-shrink: 1, and flex-basis: 100% to the layout. If you specify the width value, it will apply the max-width property.

Let’s add fxFlexOrder and fxFlexOffset:

Using this code we applied order: 3 to the second item. It will also make the margin-left: 50px to the fourth item. Now if you run the application, you will see that the second item is in the third position of the row while the fourth item gets 30px spacing from the start.

Wrapping It Up

In this tutorial, we learned how to implement the Flex Layout in Angular apps. This is going to be helpful as we will be able to use ready-to-use Flexbox CSS layouts without having to code the styling ourselves. If you need more information, refer to the Flex Layout Wiki on the GitHub page.

To keep things simple in this tutorial, we did not use binding to bind values in the component class. However, both unidirectional and bidirectional binding is possible in component class [fxLayout]="your layout direction". This will give you more control to build layouts and dynamic use cases can be handled.

Angular apps use Node.js as their runtime. If you want to learn more about Node.js and how to deploy Node.js applications on Docker, check out our How to Deploy a Node.js (Express.js) App with Docker on Ubuntu 20.04 tutorial. To learn more about Angular, check out our tutorial  Navigation with RouterLink, Navigate, and NavigateByUrl in Angular Router.

Happy Computing!