click here to view the example on your browser
base component
import { Component, ChangeDetectorRef, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-base-component',
template: `<p>
<b>base</b> component counter: {{ counter }} --
<b>should have been updated</b>
</p>
<ng-content select="[body]"></ng-content>`,
styleUrls: ['base.component.css'],
})
export class BaseComponent implements OnInit {
@Input()
public counter = 0;
constructor() {}
ngOnInit(): void {
throw new Error('Method not implemented.');
}
}
inheritance
import { Component, OnInit } from '@angular/core';
import { BaseComponent } from '../base/base.component';
@Component({
selector: 'app-inherited-component',
template: `<app-base-component>
<ng-container body>
<p><b>inherited</b> component counter: {{ counter }}</p>
</ng-container>
</app-base-component>`,
styleUrls: ['inherited.component.css'],
})
export class InheritedComponent extends BaseComponent {
public ngOnInit(): void {}
}
app component
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<app-inherited-component [counter]="20"></app-inherited-component>`,
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'everyone';
}
Unfortunately, the base counter is currently set at 0 instead of 20. I need it to be updated correctly.