The Flex-Layout library comes as one self-contained module, and so we only need to import it in one place. It is more straightforward to integrate than routing was in the previous chapter.

Now let's add Flex-Layout to our project. The first thing we need to do is to install the library. In your Terminal, navigate to the root folder of the realtycarousel application that we started creating in Chapter 4, Routing, and type the following:

 npm install --save @angular/flex-layout

This will install the library, so we can later import it into any of our Angular applications.

Note: If your CLI outputs a warning, such as something along the lines of "@angular/[email protected] requires a peer of @angular/cdk@^5.0.0 but none is installed. You must install peer dependencies yourself" (which is what happened to me), just install it the same way as anything else, as follows:

npm install --save @angular/cdk@^5.0.0

Next, we need to import it into our RealtyCarousel application. To do this, we need to add a couple of things to our application's main module. Open your RealtyCarousel project in your IDE, and then open the app.module.ts file from within the src/app directory. At the top of the file within our other import statements, add the following import statement:

 import { FlexLayoutModule } from '@angular/flex-layout';  

(Just underneath the import statement , that we added for the RouterModule will be just fine.)

We also need to include the FlexLayoutModule in the imports array within the @NgModule section, like this: (just underneath the statement RouterModule.forRoot(appRoutes), we had added for the RouterModule would be just fine.)

With that, we're done. We now have the power of Flex-Layout at our disposal. Virtually anything else we'll do with Flex-Layout gets done in our HTML.

Let's take a look at the Flex-Layout API next—which is how we'll be leveraging Flex-Layout in our pages (that is, component templates).