MCQ

Angular Flex layout

Angular flex-layout is a stand-alone library developed by the Angular team for designing sophisticated layouts. Angular Layout provides a sophisticated API using Flexbox. The module provides Angular developers with component layout features using a custom layout API.

When creating HTML pages in Angular, we can easily create flexbox-based page layouts using angular flex-layout, which has a set of instructions available for use in your template. It eliminates the need to write a separate CSS style.

Responsive layouts are created using complex CSS code and media queries in normal CSS Flexbox or CSS Grid.

Powerful layout functions

Flex-Layout is a TypeScript-based UI layout engine that uses HTML markup to specify layout configurations.

Flex Layout Instructions for Flexbox Containers

Below are the APIs or Directives used on Flexbox Containers,

fxlayout
fxlayout gap
fxLayoutAlign
fxlayout

fxLayout is a directive used to define the layout of HTML elements. i.e., it decides the flow of child elements within the flexbox container and should be applied to the parent DOM element i.e. the flexbox container. This directive is case sensitive and the allowed values of fxLayout are row, column, row-reverse, and column-reverse.

<div fxLayout="row">
<div class="sub-section-1"></div>
<div class="sub-section-2"></div>
</div>

fxLayoutAlign

fxLayoutAlign directive defines the alignment of children elements within the flexbox parent container.

Syntax:

Example:

fxLayoutGap

fxLayoutGap is a directive that defines the gap between the children items within a flexbox container

Example:

Angular flex layout directives for flexbox children

The following directives are applicable to flexbox children elements

fxFlex
fxFlexOrder
fxFlexOffset
fxFlexAlign

fxFlexFill

What is fxFlex?

fxFlex is one of the most useful and powerful APIs in Angular Flex Layout. It must be used on children elements inside the fxLayout container. It is responsible for resizing elements along the main-axis of the layout.

<div fxLayout="row" fxLayoutAlign="start center">
<div fxFlex="30"></div>
<div fxFlex="30"></div>
</div>

fxFlexOrder

Defines the order of a flexbox item,

fxFlexOffset

Offset a flexbox item in its parent container flow layout.

fxFlexAlign

Works like fxLayoutAlign, but applies only to a single flexbox item, Instead of all of them.

fxFlexFill

Maximizes the width and height of an element in a layout container.

Flex with Align-Self

'flex-align' can change the alignment for a single element only.

Understanding of Layout with 'layout-align'

Flex items are laid out in horizontal rows or vertical columns.

Layout Direction

We can defined layout direction as a container { fxLayout: row | row-reverse | column | column-reverse; } row (default): left to right in ltr; right to left in rtl;, which has four possible values:

row
row-reverse
column
column-reverse

Alignment in Layout Direction (Horizontal)

We can use layout alignment attributes value to adjust item's horizontally, and it's defined at main-axisfxLayoutAlign="". These have seven possible values,

none
start (default)
end
center
space-around
space-between
space-evenly

Alignment in Perpendicular Direction (Vertical)

The same concept applies to vertical layout alignment attributes:

none
start
center
end
stretch (default)

Use the following code to align the Layout vertically and horizontally.

Layout Direction: row

Alignment in LayoutDirection(Horizontal): start

Alignment in Perpendicular Direction(Vertical): center

<div fxLayout="row" fxLayoutAlign="start center">
  <div class="child-1"></div>
  <div class="child-2"></div>
</div>

Another example:

Layout Direction: column

Alignment in LayoutDirection(Horizontal): end

Alignment in Perpendicular Direction(Vertical): center

<div fxLayout="column" fxLayoutAlign="end center">
  <div class="child-1"></div>
  <div class="child-2"></div>

Another example:

Layout Direction: column

Alignment in LayoutDirection(Horizontal): end

Alignment in Perpendicular Direction(Vertical): center

<div fxLayout="column" fxLayoutAlign="end center">
  <div class="child-1"></div>
  <div class="child-2"></div>
</div>

Responsive Layout Directions

Angular Flex-Layout responsive API

An Angular service is just a JavaScript function. All we have to do is create a class and add methods and properties. Then we can create an instance of this class in our component and call its methods.
One of the best uses of services is to get data from a data source. Let us create a simple service, which receives product data and sends it to our component.
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px">
 <div fxFlex="35"> Child - One </div>
 <div fxFlex="30" fxHide.lt-md> Child - Two </div>
 <div fxFlex="35" fxLayoutAlign="space-around center">
    <div  fxFlex="50" fxFlex.lt-lg="80"> Sub-child - One</div>
 </div>
</div>

Installation of Angular Flex-Layout

Use the following command to use Angular Flex layouts in your projects.

After installing flex layout we need to import flexLayoutModule in our app.module.ts file as shown below.

import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { CardLayoutComponent } from './card-layout/card-layout.component';
@NgModule({
imports: [ FlexLayoutModule ],
});

Let's create a component called card-layout in our project,

Lets add the example code shown below to the HTML template file after creating the card-layout component.

In this example, we have cards that are added on a row and aligned in the same column. When we check the responsiveness in the browser, it auto-adjusts the card layout due to the responsive breakpoints of fxLayout.md and fxLayout.lt-md of fxFlex.md and fxFlex.lt-md.

card-layout.component.html

<div class="container" fxLayout="column" fxLayout.md="row" fxLayoutGap="20px">
   <div class="cardWrap" fxLayout.lt-md="column" fxLayout.md="column"  fxLayout="row" fxFlex.md="50" fxLayoutAligmnet="space-between center" fxLayoutGap="20px" >
   <div fxFlex.lt-md="100" fxFlex="35" >Card</div>
   <div fxFlex.lt-md="100" fxFlex="35" >Card</div>
   <div fxFlex.lt-md="100" fxFlex="35" >Card</div>
 </div>
 <div class="cardWrap" fxLayout.lt-md="column" fxLayout.md="column" fxLayout="row" fxFlex.md="50" fxLayoutAligmnet="space-between center" fxLayoutGap="20px" >
 <div fxFlex.lt-md="100" fxFlex="35" >Card</div>
 <div fxFlex.lt-md="100" fxFlex="35" >Card</div>
 <div fxFlex.lt-md="100" fxFlex="35" >Card</div>
 </div>
</div>
Card-layout.component.scss
.container .cardWrap div{
height: 300px;
border:2px solid gray;
}

Next TopicAngular Paginator

← prev next →