Angular Flex Layout is designed to provide a comprehensive layout design using CSS Flexbox and Media Query. Unlike most other libraries, it doesn’t use CSS Classes but rather uses directives. It also makes it easy to manipulate DOM. On top of that, you can inject it into the component class, if you wanted to change code behavior based on the device width. You can learn more about Angular Flex Layout here.
While working with Angular Flex Layout, while powerful, your templates can get messy very quickly. This also leads a lot of copy-pasting. Let’s take a simple example, to build a responsive layout with 100% height, 70% width on large devices and 100% on small devices, and the content centered, you need the following code:
<div style="height: 100vh" fxFlex="100" fxLayout="row">
<div
fxFlex="70"
fxFlexOffset="15"
fxLayout="row"
fxLayoutAlign="center center"
fxFlex.lt-lg="100"
fxFlexOffset.lt-lg="0"
style="border: solid thin #000000;"
>
content here
</div>
</div>
For a small project, this is manageable, but as your project grows, it can escalate to messy and unmanageable very quickly. Imagine yourself in a situation where you need that exact same responsive design in multiple places. You can reduce the occurrences by nesting your project routes wisely, but that will only take you so far. And God forbid, you want to make some adjustment.
Our Goal
In this post, we are going to build a wrapper that will reduce the repetition of the above code to manageable level. The goal is simple, have a few wrappers for various responsive layouts scenarios inside your project. You could have a wrapper for forms, tables, cards etc. So, instead of writing all the above code every time, you can simplify it to the following:
<app-flex-layout-wrapper> <!-- HTML Content Here --> </app-flex-layout-wrapper>
This is easier to read, and the code is cleaner. But more importantly, it is very easy to adjust your layouts without going over a torn of code. On top of that, it allows you to maintain the format of your template. This builds on top of the concept of re-usable components in Angular. This is because these wrappers can be re-used across your project and without limitation.
Getting Started
We will start by building a new project in Angular, using Angular CLI.
$ ng new angular-flex-layout-wrapper-demo
Then, we are going to install Angular Flex Layout and Angular CDK.
$ yarn add @angular/flex-layout @angular/cdk
$ npm install @angular/flex-layout @angular/cdk
And then inside our app module, we are going to import FlexLayoutModule from Angular Flex Layout.
// ...
import { FlexLayoutModule } from '@angular/flex-layout';
// ...
@NgModule({
declarations: [
// ...
],
imports: [
// ...
FlexLayoutModule
]
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
And that’s it for our project setup. Let’s now build our wrapper.
Wrapper Component for our Responsive Layouts
If you look at our wrapper, you will notice we are using it just like a normal HTML element (DIVs, Ps). But if you have worked with Angular before, you know by default component don’t work like that. The content in between the component tags, is usually replaced by the component content once rendered. But in our case, we want this to feel like native html elements that we are already used to.
<app-flex-layout-wrapper>
<!-- we want to be able to any html content here -->
</app-flex-layout-wrapper>
To achieve this, we are going to use ng-content to define a slot within our wrapper component content to add content dynamically. The content in between the component tags, is then dynamically added in the defined location. Let’s build this now. First, let’s we need to generate a new component using Angular CLI.
$ ng generate component flex-layout-wrapper
And then inside our component template, we just need to define our responsive layout and then, a slot to dynamically project our content using ng-content:
<div style="height: 100vh" fxFlex="100" fxLayout="row">
<div
fxFlex="70"
fxFlexOffset="15"
fxLayout="row"
fxLayoutAlign="center center"
fxFlex.lt-lg="100"
fxFlexOffset.lt-lg="0"
style="border: solid thin #000000;"
>
<ng-content></ng-content>
<!-- Content will be projected here -->
</div>
</div>
Now, any content that we add in between our component selector tags, will be added in the section defined by ng-content inside our wrapper template. When this content is projected inside the template, it follows the constraints defined by the div containers which will act as its parent.
Final Thoughts
The above methods allows you to pre-define a set of wrappers or containers for your different layouts. This reduces code duplication and makes it easy to make changes and adjustments. On top of that, this leads to consistency in your project design. Inside the component tags, you can build your template just as you would in any other situation. And formatting by your text editor should not affected at all. Thank you for getting this far, if you are interested here are a few more posts covering Angular Flex Layout.