Question: Dear Stackoverflow Users,

I haven't seen any examples regarding this question, but I should probably mention my plan first. 

I have three different pages, that basically share many FormGroups. Their differences are basically minimal, maybe one or two FormControls. Of course, I could basically just copy paste the entire component and merely add the control I need, but I feel that it is a fairly impractical and messy solution. How would I properly approach this problem? And are any good resources regarding inheritance in Angular in general? The official page doesn't seem to make any mention from what I have seen in the hero course.

Answer: 
I don't know why I assumed, that it wasn't as simple as I thought it to be.
First, I create a FormBuilder class, that sets up all the controls that are shared between all the other forms I use. Now, any component that is extending the FormBuilder class is able to create a form like this. 

```
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Form } from '../form';

@Component({
  selector: 'app-invoices',
  templateUrl: './invoices.component.html',
  styleUrls: ['./invoices.component.scss']
})
export class InvoicesComponent extends FormBuilder {

  constructor() { 
    super()

    this.createForm();
  }
}

```

So, the FormControls that I needed could be easily included by just adding

```
this.queryForm.addControl('newControl', new FormControl(''))

```

So the html code of the component required almost no changes whatsoever.
You can do it with content projection. 

Let's assume you have a FormGroup component with two inputs. This component will also have `ng-content` so that other components can inject their own html.

```
@Component({
    selector: 'my-form-group',
    template: `
        Type something : <input type="text"/> 
        Select something: <select> ... </select>
        Insert your own stuff: <ng-content></ng-content>
    `
})
export class FormGroupComponent {}

@Component({
    selector: 'my-form-group-radio',
    template: `
        <my-form-group>
             <input type="radio" name="myOption" value="1" />
             <input type="radio" name="myOption" value="2" />
        </my-form-group>
    `
})
export class FromGroupRadioComponent {}

```

In this way, you can reuse `FormGroupComponent` as many times as you want. You can create different kind of components and project different content.