bootstrap panel not taking the ng-content

Question

I'm new to angular and trying to listing a bootstrap panel in a typescript page.

so I'm trying to do it like this

bootstrap.panel.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'bs-panel',
    template: `
    <div class="panel panel-default"> 
        <div class="panel-heading">
            <ng-content select=".heading"></ng-content>
        </div>
        <div class="panel-body">
            <ng-content select=".body"></ng-content>
        </div>
    </div>
    `
})

export class BootstrapPanel{

}

then in the main app component file, I referenced and used it like this

app.component.ts

import {Component} from 'angular2/core';

// bootstrap panel
import {BootstrapPanel} from './bootstrap.panel.component';

@Component({
    selector: 'my-app',
    directives: [BootstrapPanel],
    template: `

    <!-- ngContent sample -->
    <br/>  <br/>  <br/>
    <bs-panel>
       <div class="heading"> This is heading </div>
       <div class="body"> This is the body! </div>
    </bs-panel>

     `
})
export class AppComponent { 

}

but this not showing text inside the content

this is the output it has

once I press F12 , under console section I can see like this

above error is

Uncaught TypeError: Cannot read property 'getSelection' of null

then I found following solution for the above which is disabling all the extensions in Google Chrome, then above console error vanished, but still nothing appearing in the content.

how can I correct this