Why does angular base component html elements not recognize changes to data?

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

Related Post