angular 4 component inheritance and "extending view"

user_5342949 0
Viewed 2502

When you do component inheritance in angular like

export class ChildComponent extends ParentComponent{}

You can get all the logic from the ParentComponent, but you have to implement the entire html again.

Say my ParentComponent's html looks like this

<div class="card">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

Is there a way I can "implement" the parent component where the child component view sort of implements only the "content" div?

for example

@Component({
   template:`<div class="content-of-child">...</div>`
})
 export class ChildComponent extends ParentComponent{}

so that the result will be

<div class="card">
        <div class="header"></div>
        <div class="content-of-child"></div>
        <div class="footer"></div>
    </div>
angular typescript inheritance
1 Answers

No you can't do like that but what you can do is split your parent component into 3 components and extend only 'content' component. But then again you will need to create New parent component where you will insert extended component.

user_68001450
Related