Thank you for reading my blog posts, I am no longer publishing new content on this platform. You can find my latest content on either mainawycliffe.dev or All Things Typescript Newsletter (✉️)
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.
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.
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.
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.
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.
One of the least talked about features of Angular 6 is Angular CLI Workspaces. Workspaces or Angular CLI Workspaces give angular developers …
Read MoreToday, we are going to create a responsive Navbar using Toolbar and Sidenav Components from Angular Material together with Angular Flex …
Read MoreFirst before I can say anything else, I want to express my huge respect and love for Bootstrap. I am not writing this to bash bootstrap in …
Read MoreIn simple terms, pipes allow us to write display value transformation right inside the template. Angular comes with stock or built in pipes …
Read MoreIn most cases, forms have constant form controls – remaining static throughout the lifetime of the form. But from time to time, you can …
Read MoreIn today’s post, we are going to see how to modify the User Interface (UI) based their user role. This is useful if you wish to display …
Read More