Repository: angular
Issue: There is problem with Angular inheritance
Labels: area: forms

### Which @angular/* package(s) are the source of the bug?

Don't known / other

### Is this a regression?

No

### Description

I have Angular project with thousands of forms. These forms are all the same, they have almost the same way functioning but there is some differences between these forms in functionally part and in template part.

I need some better way of inheriting components, something like where I can define the base component with his functionality and his template, but in that template I can set some ng-template elements which I will change in child component of this parent.

I found way of doing this with extending base component and in template of child component adding parent element and with nested content changing the way of parent component. Code is on SandBox (https://codesandbox.io/s/github/dsavke/inheratance-test), this is just dummy example of this situation.

BaseFormComponent code:

```
@Component({
    selector: 'base-form',
    templateUrl: './base-form.component.html'
})
export class BaseFormComponent {
    private counter: number = 0;

    @ContentChild('content') content!: TemplateRef<any>;

    public editUrl: string = '';

    public onEdit(): void {
        //some logic
    }

    public onSave(): string {
        if (!this.canSave())
            return 'Not saved';

        return 'Saved';
    }

    public canSave(): boolean {
        return true || true;
    }

    private updateCounter(): void {
        this.counter++;
    }
}
```
BaseFormComponent template code:

```
<h2>Base component</h2>
<p>Can save form? {{canSave()}}</p>

<ng-container
    style="border: 1px solid red;"
    *ngIf="content"
    [ngTemplateOutlet]="content"
></ng-container>
```

UserFormComponent ts code:

```
@Component({
    selector: 'user-form',
    templateUrl: './user-form.component.html'
})
export class UserFormComponent extends BaseFormComponent {
    public override canSave(): boolean {
        return false;
    }
}
```

UserFormComponent template code:

```
<base-form>

    <ng-template #content>

        <h5>This is from USER FORM!</h5>

    </ng-template>

</base-form>
```

This is the only way I have found component inheritance to work in Angular, but there is several problems: 

1.  In this situation I am duplicating instances of BaseFormComponent, one is created when I have extended mine UserFormComponent and the other one is created in template where I put element of BaseFormComponent so I could get the UI of that component;
2.  Overriding methods in UserFormComponent here is useless because instance of parent (mine extended component) is never visible (because of decorators, but I need to have two templates, one for base component who will showed and the other one for my component which I will change some structure using ng-template), it just show an instance from template;

Is there some other way to do inhertance, but I need template and functionallity from parent component and I also need template and functionallity in child component, something like you get the all template from parent component, but you can change these elements in some way in child component, and this would be a real inheritance, is that even possible in Angular?


### Please provide a link to a minimal reproduction of the bug

_No response_

### Please provide the exception or error you saw

_No response_

### Please provide the environment you discovered this bug in (run `ng version`)

_No response_

### Anything else?

_No response_