Cristiano Subbaiah

Animal Kingdom Veterinary Hospital, Pllc pays an average salary of $3,933,340 and salaries range from a low of $3,420,501 to a high of $4,493,565. Individual salaries will, of course, vary depending on the job, department, location, as well as the individual skills and education of each employee.

Michigan in Pictures : 18 Beautiful Places to Photograph · 1 Mackinac Island · 2 Lake Michigan · 3 Detroit · 4 Crisp Point Lighthouse · 5 Holland

Attorney General Eligibility Criteria · He/She has been for at least five years a Judge of as High Court or two or more than two such courts; or · He/She has been

In this post, I will show how to use Angular Flex-Layout in HTML.

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

When creating an HTML page in Angular, using Angular Flex-Layout allows us to easily create FlexBox-based page layouts with a set of directives available for use in your templates. This eliminates the need to write a separate CSS style.

In a normal CSS flexbox or CSS grid, responsive layouts are made using complex CSS code and media queries.

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

The following API or directives are used on flexbox containers,

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

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

Example:

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

The following directives are applicable to flexbox children elements

fxFlex is one of the most useful and powerful API in Angular flex layout. It should be used on children’s elements inside a fxLayout container. It is responsible for resizing the elements along the main-axis of the layout.

Defines the order of a flexbox item,

Offset a flexbox item in its parent container flow layout.

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

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

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

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

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

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

The same concept applies to vertical layout alignment attributes:

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

Another example:

In Angular flex-layout we can easily change components and HTML templates layout size, position on different breaking points, and automatically adjust for different screen sizes and viewports using a responsive API engine. Using this we create an HTML template that looks good on all devices.

Responsive layout has some predefined breakpoint aliases with its media query values.

Available Breakpoints List in Angular Flex-LayoutAn example highlighting responsiveness is shown below,

In this row layout example, all elements in the row layout are aligned horizontally. However on mobile devices, we cannot show these all elements in row layout as the width of the mobile device is small. In the example listed below we use a responsive breakpoint fxLayout.xs= “column”. This transitions to a column layout on mobile devices. The usage of fxHide.lt-md on the second child will not display below a screen width of 960px.

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.

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

After creating a card-layout component lets add the example code shown below in the HTML template file.

In this example, we have cards which are added in one row and aligned within a single column. When we check for responsiveness in the browser, it auto adjusts the card layout because of responsive breakpoints of fxLayout.md and fxLayout.lt-md with fxFlex.md and fxFlex.lt-md.card-layout.component.html

Card-layout.component.scss

The output is as shown below. Using Angular Flex layouts, we can create any HTML layouts that are responsive on all devices.