While this may not be an exact match for what you're seeking, it could point you in the right direction.

Explained

I once tackled a similar challenge with a shared-form-wizard component. My approach involved creating a shared-wizard.component that standardized a form dialog while still allowing me to customize the tabs displayed within that Shared Wizard. This setup enabled me to reuse the base component across different Wizards in my application.

In my scenario, I opted against using traditional inheritance by segregating my logic to avoid potential complications, but incorporating it shouldn't pose significant challenges.

Illustrative Code Snippets

To enable custom content projection, generate a Custom ContentProjectorTemplateRef directive and pipe. These constructs facilitate projecting customized content. In my case, I utilized them to iterate tab content, hence inclusion of index in the pipe (you can omit if unnecessary).

@Directive({
  selector: "[contentProjectorTemplateRef]",
  standalone: true,
})
export class ContentProjectorTemplateRefDirective {
  constructor(public templateRef: TemplateRef<unknown>) {}
}

...

@Pipe({ name: "contentProjectorTemplateRef", standalone: true })
export class ContentProjectorTemplateRefPipe implements PipeTransform {
  public transform(content: QueryList<ContentProjectorTemplateRefDirective>, index: number): TemplateRef<unknown> {
    return content.get(index)?.templateRef;
  }
}

In your core component, define a query list for projected content.

@ContentChildren(ContentProjectorTemplateRefDirective) content!: QueryList<ContentProjectorTemplateRefDirective>;

Add ngTemplateOutlet to the core-component interface:

<!-- Project the templateRef into the templateOutlet -->
<ng-container *ngTemplateOutlet="content | contentProjectorTemplateRef : i">
</ng-container>

Enclose these elements in appropriate tags, then transmit to the core-component alongside any necessary configuration inputs. The final structure should resemble something like this:

base.component.html

<form #sharedForm="ngForm">
  <h1>Shared Form</h1>
  ... // Other necessary components
</form>

base.component.ts

export class SharedWizardComponent implements AfterViewInit, OnDestroy {
  @ContentChildren(ContentProjectorTemplateRefDirective)
  content!: QueryList<ContentProjectorTemplateRefDirective>;

  @ViewChild("sharedForm", { static: false }) public sharedForm: NgForm;
  @Input() form: UntypedFormGroup;
...
  public ngAfterViewInit(): void {
          this.sharedForm = this.form as unknown as NgForm;
    }
  }

For the child component:

child-form-1.component.html

<form #childForm="ngForm">
  <shared-wizard>
    <ng-template contentProjectorTemplateRef> ...customContent1 </ng-template>
    <ng-template contentProjectorTemplateRef> ...customContent2 </ng-template>
    <ng-template contentProjectorTemplateRef> ...customContent3 </ng-template>
  </shared-wizard>
</form>

This setup puts you on the right track. Further adjustments related to forms are inevitable, but it empowers cleaner separation of logic without mandate for classical inheritance, offering the flexibility for child components to drive parent component changes.

Honestly, I'm not sure how many aspects all of your forms share, so it's uncertain if this response will be helpful. However, I recommend considering a different approach: content projection.

Picture having a BaseFormComponent

<fieldset class="container">
  <legend>{{title}}</legend>
  <ng-content></ng-content>
  <div>
    <button (click)="submit(form)">submit</button>
    <button type="button" (click)="cancel()">cancel</button>
  </div>
  <div>{{result$|async}}</div>
</fieldset>

You can enhance your baseForm component with additional code

 @Input('formGroup') form: FormGroup;
 @Input('title') title: string = '';
 @Input('dataService') dataService:any=null

 result$:any
 constructor(private router: Router, private activatedRoute: ActivatedRoute) {}
 cancel() {
   if (this.form.touched && window.confirm('Do you really want to leave?')) {
     this.router.navigate(['../'], { relativeTo: this.activatedRoute });
     this.form.reset();
   }
 }
 submit(form) {
   if (form.valid) {
     this.result$=this.dataService.save(form.value).pipe(
                     map((res:any)=>res.success?'Data save':'error'))
   } else form.markAllAsTouched();
 }

Then, your form components could look something like this

<base-form [formGroup]="form" title='Users' [dataService]="userService" >
 <label>User name :</label><input formControlName="userName">
 <label>Password :</label><input formControlName="password">
</base-form>

In this way, you can utilize the BaseComponent to override functions when necessary or assign values to variables that are not inputs

 @ViewChild(BaseFormComponent,{static:true}) base:BaseFormComponent
 constructor(public userService:UserService) {
 }
 form: FormGroup = new FormGroup({
   userName: new FormControl(''),
   password: new FormControl(''),
 });
 ngOnInit()
 {
   this.base.title='users'
   this.base.actionButton="create user"
 }

Check out this StackBlitz demo