Angular 4: Creación de componentes. Importación de componentes

En src/app creamos por ejemplo una carpeta common

Dentro de common creamos el fichero header.component.ts
import { Component } from '@angular/core';
import { componentFactoryName } from '@angular/compiler';

@Component({
    selector: 'app-header',
    template: '<h1>Esto va a ser la cabecera</h1>'
})

export class HeaderComponent {
}

Dentro de common creamos el fichero footer.component.ts
import { Component } from '@angular/core';
import { componentFactoryName } from '@angular/compiler';

@Component({
    selector: 'app-footer',
    template: '<h1>Esto va a ser el footer</h1>'
})

export class FooterComponent {
}

Y ahora solo importar en el App principal esos nuevos componentes en app.module.ts:
import { HeaderComponent } from './common/header.component';
import { FooterComponent } from './common/footer.component';

...
declarations: [ AppComponent, HeaderComponent, FooterComponent ],

Y añadirlos al template de app.component.ts:
template: `<app-header></app-header>
              <h1>Hola holitaa mundo {{name}}</h1>
              <app-footer></app-footer>`
Para añadir los CDN de Bootstrap y JQuery hacerlo en index.html

En nuestros componentes es mucho más legible usar templateUrl en vez de template:
@Component({
    selector: 'app-header',
    templateUrl: './header.component.html'
})

Y así nos creamos un fichero header.component.html donde meter todo el HTML

Si queremos que cada componente tenga sus propios CSS:

right.component.ts:
@Component({
    selector: 'app-right',
    templateUrl: './right.component.html',
    styleUrls: ['./right.component.css']
})

right.component.html:
<div class="col-md-8">
    <p class="bloqueRight">Zona Derecha</p>
</div>

right.component.css:
.bloqueRight {
    border:1px solid #000;
    background-color: #2C2961;
    color:#FFF;
    height:300px;
}


VARIABLES EN LOS COMPONENTES

En el right.component.ts:
export class RightComponent {
    titulo:string = "En un lugar de la Mancha";
    arrNum:Array<string> = ["uno", "dos", "tres", "cuatro", "cinco"];
}

En el right.component.html:
<div class="col-md-8">
    <div class="bloqueRight">
        <p>{{ titulo }}</p>
     
            <ul>
                <li *ngFor="let item of arrNum"> {{item}}</li>
            </ul>
     
    </div>
</div>