I'd like to create component for representing base panel (with HTML template). Then I'd like to inherit this base class but specifying only title (as class attribute/function or `@Input`) and content (as `template` or `templateUrl` in `@Component` decorator).

```js
@Component({
    template: `
        <div class="panel">
            <div class="title">{{title}}</idv>
            <div class="content">???</div>
        </idv>
    `
})
export class BasePanel {
    @Input()
    protected title: string = '';
}

@Component({
    selector: 'my-panel',
    template: `MyPanel template - lorem ipsum`
})
export class MyPanel extends BasePanel {
    title: string = 'MyPanel title';
}

```

then in other template:

```html
<my-panel></my-panel>

```

or

```html
<my-panel title="My better panel"></my-panel>

```

The very good solution would be to deliver content between HTML tags:

```html
<my-panel title="My panel with content">
    <p>Lorem ipsum dolor sit amet,</p>
    <p>consectetur adipiscing elit.</p>
</my-panel>

```

**Edit 1**

The solution from @rinukkusu with ng-content is working.

But I'd like to have a possibility to create `BasePanel` component which would decorate derived component template.