Angular 2 - app.component contents?

Question

I was wondering. What do you recommend to have in the app.component files? My immediate thoughts on this would be only to have things like navbars and footers in it. Because these are the only elements which doesn't change throughout the application. Is this the correct reasoning or would you do it differently?

Answer 1

When I build applications using Angular, I usually only have a reference to a layout component within the app.component. Eg app.component.html:

<app-layout class="wrapper"></app-layout>

The layout component would contain a header, footer and router-outlet. Something like:

<!-- Top navbar-->
<app-header></app-header>
<!-- Page content-->
<div class="content-wrapper">
    <router-outlet></router-outlet>
</div>    
<!-- Page footer-->
<app-footer></app-footer>

I personally like this approach as it breaks the components down so that they have a clear and defined purpose.