Estou criando um aplicativo que possui vários componentes usando o relacionamento pai-filho na angular 5.

Dentro do meu app.component.html principal, tenho essa estrutura.

        <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>

onde esta diretiva "app-layout-header" é responsável por carregar a navegação lateral e a navegação superior como esta.

Agora, essa diretiva "app-layout-view" é responsável por carregar tabela de dados ou grade como esta.

Eu quero usar o layout flexível para torná-lo responsivo e também quero um resultado final como esse.

Mas não tenho certeza de como colocarei a tabela de dados exatamente dentro do local que eu queria, que fica abaixo da barra de navegação superior e perto do menu lateral. Atualmente, está abaixo do menu lateral, como você pode ver na segunda imagem.

O que devo fazer agora para obter o resultado desejado?