How to use flex-layout in nested components in angular 5?

Question

I am creating one application that has several components using a parent child relation in angular 5.

Inside my main app.component.html I have this structure.

        <app-layout-header></app-layout-header>
           <app-layout-view></app-layout-view>
           <app-layout-add></app-layout-add>

           <router-outlet></router-outlet>

        <app-layout-footer></app-layout-footer>

where this "app-layout-header" directive is responsible for loading side navigation and top navigation like this.

Now this app-layout-view directive is responsible for loading a data table or grid as follows.

I want to use a flexible layout so that I can make it responsive, and I also want to get the final result.

, , , . , .

, ?