I want to inherit parent's template using component's inheritance in Angular.
Intro
I have some basic component (let's call it ParentComponent) and several childs of this component (Child1Component and Child2Component). I want to put default behavior in the ParentComponent and then just setup/extend this behavior in children components. ParentComponent template already contains all the needed things, so I want children components to use this template by default.
First variant of implementation (does not work, Error: No template specified for component Child1Component):
@Component({
selector: 'app-parent',
templateUrl: './app-parent.component.html',
styleUrls: ['./app-parent.component.scss']
})
export class ParentComponent {
}
@Component({
selector: 'app-child1'
})
export class Child1Component extends ParentComponent {
}
@Component({
selector: 'app-child2'
})
export class Child2Component extends ParentComponent {
}
I found that I can set templateUrl and styleUrls of children to parent's template, but it will work only if ViewEncapsulation of children is set to None.
Second variant (it works, but I don't like it):
@Component({
selector: 'app-parent',
templateUrl: './app-parent.component.html',
styleUrls: ['./app-parent.component.scss']
})
export class ParentComponent {
}
@Component({
selector: 'app-child1',
templateUrl: '../parent/app-parent.component.html',
styleUrls: ['../parent/app-parent.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class Child1Component extends ParentComponent {
}
@Component({
selector: 'app-child2',
templateUrl: '../parent/app-parent.component.html',
styleUrls: ['../parent/app-parent.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class Child2Component extends ParentComponent {
}
I don't like this solution cause of
- No view encapsulation in child components;
- Template and style urls copy-paste for every child component.
Can you please suggest me better solution for this task?