How to load a component as common in angular2

Question

My module.ts,

@NgModule({

  imports:      [ BrowserModule,
  RouterModule.forRoot([
      { path: '', component:AppComponent},
      { path: 'login', component:AppComponent}
    ]) ],
  declarations: [ AppComponent,Mainapp ],
  bootstrap:    [ Mainapp ]
})
export class AppModule {}

In module.ts,I am bootstrapping Mainapp,which contains my common background image that appears in every screen.

My mainapp.html,

<section id="content" style="background-image: url('assets/images/bg.png');background-size: 100% auto;min-height: 100% !important;">
    <div class="content-wrap" [ngClass]="classmap">
            <div class="container clearfix">
                <div class="row  divcenter"   style="max-width:966px;background: #FFF;">
                        <router-outlet></router-outlet>   
                </div>
            </div>
    </div>
</section>

Here i am placing all my route outputs.I even have one more component named demo.ts which need to be called as a common because it has my side menu bars. My doubt is I want call another component as common in all pages like how i am calling Mainapp. How can i do that?Can anyone help me pleae.Thanks.

Answer 1

mainApp.component.html:

  <my-nav><my-nav>

  <router-outlet></router-outlet>

  <my-side-menu></my-side-menu>
  <my-footer></my-footer>

And call mainApp as below:

my-footer.component.ts:

import {MainAppComponent} from 'main-app.component.html';
 @component({
   ....
 })
export MyFooterComponent{
    parent:any;
    constructor(public _main:MainAppComponent){
       this.parent=_main;
    }
}