what am i missing here? This is a simplified example of creating an Angular 18 base component and a heir component extending it. Both are standalone. All seems fine in that the heir component sees the base components properties and methods in this. override is required on base methods and properties. Changes to the variables done in either base or heir show up. My problem is the html in base doesn’t seem to recognize any changes in the variables. Change the variables in either base or heir and the heir html responds. Not what I expected.
I create a base component QueryBaseComponent
name:string='nancy;
changeName(newName:string){
this.name = newName;
console.log(this.name);//shows liberace
}
onClick(event:any){
//always fires even if it is override in heir component
console.log('base');
}
html
<label>{{name}}</label> //always shows initial value of nancy, doesn't change
<button (click)="onClick($event)">hit me</button>
<ng-content select="[position=bottom]"></ng-content>
i extend the base component
export class QueryTextComponent extends QueryBaseComponent implements AfterViewInit
ngAfterViewInit(){
this.changeName('liberace');
}
override onClick(event:any){
//never gets hit
console.log('heir');
}
html
<app-query-base>
<div position="bottom">
<label>{{name}}</label> //shows nancy and then liberace
</div>
</app-query-base>
You need to sign in to view this answers
Leave feedback about this