Menu
Inheritance with Angular Components We can create a “parent” component with common properties/functions, followed by a child component that “extends” the parent. The child will inherit the parent's properties and functions but will have its own template, stylesheet and test file.
Instance Lifecycle Hook ChainingInstance lifecycle hooks are inherited. So if your super class provides an instance lifecycle hook, then your child class will have that hook and you might want to consider overriding it.
The child component uses the @Output() property to raise an event to notify the parent of the change. To raise an event, an @Output() must have the type of EventEmitter , which is a class in @angular/core that you use to emit custom events.
How would you inherit the template from a parent component in angular 4? Most materials exemplify overriding the parent component like this:
import { Component } from '@angular/core';
import { EmployeeComponent } from './employee.component';
@Component({
selector: 'app-employee-list',
template: `
<h1>{{heading}}</h1>
<ul>
<li *ngFor="let employee of employees">
{{employee.firstName}} {{employee.lastName}} <br>
{{employee.email}} <br>
<button (click)="selectEmployee(employee)">Select</button>
</li>
</ul>
`
})
export class EmployeeListComponent extends EmployeeComponent {
heading = 'Employee List';
}
but I want to inherit the template from EmployeeComponent, instead of overriding it with my own custom version. How can this be achieved?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With