In this tutorial, we’ll learn how to use the CSS Flex-Layout by example in Angular 10/9.

In this tutorial, we’ll learn how to use the CSS Flex-Layout by example in Angular 10/9.

What is Angular Flex Layout?

The Flex layout is a modern CSS layout for laying out elements in HTML pages.

Using flexbox CSS layout we can easily control and adjust the width and height of HTML elements based on the available vertical or horizontal space. It can also be used to easily center elements without complex CSS tricks.

We can use Flex layout to create various layouts and structures for different kinds of display devices and different screen sizes.

A flex container expands its child elements to fill available free space or shrinks them to prevent overflow.

Angular provides an official package for easily working with the Flex layout in Angular.

Let’s see how to use it with Angular 10/9 by example.

Installing Angular 10 Flex Layout

Let’s now see how to install Angular Flex-Layout in our Angular 10 projects.

Head over to your terminal and run the following command in your project:

npm install --save @angular/flex-layout @angular/cdk

After installing Angular Flex Layout, next import flexLayoutModule in yourapp.module.ts file as follows:

import { FlexLayoutModule } from '@angular/flex-layout';
@NgModule({
imports: [ FlexLayoutModule ],
});

angular-9 angular-10 angular

Angular NgModel is an inbuilt directive that creates a FormControl instance from a domain model and binds it to form control element.

In this tutorial, we’ll learn how to embed and display PDF files in Angular by creating a simple example application using the latest Angular 10 version.

Actualizar app de Angular 9 a Angular 10. In this tutorial we convert an Angular 10 application to a PWA.

Build an HTML Table Example Dynamically with Angular 10/9 and ngFor. Step 1 - Getting Table Data with Angular 10 Service and HttpClient. This is better done using an Angular 10 service and the HttpClient API, so let's suppose we have the following service: Step 2 - Displaying the Table Using Angular 10/9 ngFor.

Angular 11 login with facebook. In this tutorial, you will learn how to login with facebook in angular 8/9/10/11 app.