Angular 12 How to isolate scope of property when parent and child component extend same base component

Question

I have an abstract base class called ScreenBaseComponent:

export abstract class ScreenBaseComponent implements OnInit, OnDestroy {
   public trackId: number;
}

I have a parent component that extends the ScreenBaseComponent:

export class ParentComponent extends ScreenBaseComponent implements OnInit, OnDestroy {

}

One of the child components in ParentComponent called ChildComponent also extends ScreenBaseComponent:

export class ChildComponent extends ScreenBaseComponent implements OnInit, OnDestroy {
 public trackId: number;

 ngOnInit() {
        super.ngOnInit();
        this.trackService.getTrackDesigns(this.gridId).subscribe((data) => {            
            data.map((eachTrac) => {
                if (eachTrac.name == this.TracName) {
                    this.trackId = eachTrac.id;
                }
            });
        });
    }
}

As per the requirement, change in trackId, triggers an event and the grid is reloaded. When I change the trackId in the child component the grid in child page is reloaded which is good. The issue is, the trackId in parent component also changes. Is there a way to isolate the scope of trackId within each component?

Trying to understand the issue here. Thanks in advance.