bug(input/mat-form-field): Detached DOM nodes are not garbage collected and results in memory leak when switching between lazy loaded routes

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

---

### Description

**Background:**
I've been using angular material for a couple of years together with a team and recently our application has grown so that we have around 1400 inputs on one screen for example. We 've come across on problems that our application started to becoming slow after switching between different screens/routes after a while. It turned out to be memory leaks (Detached nodes that are not garbage collected) and some of the leaks we 've managed to fix because of missing unsubscribtion in our application but others we can't fix and seems to be input and mat-form-field related. We've implemented a workaround that we reload page when memory hits defined limit so we can still deliver a product however angular material related memory leaks are beyond our control.

**Description:**
First of all I've created a simple example project that has two screens each in separate module screen-one.module.ts and screen-two.module.ts and those modules are lazy loaded and has its own routes 'screen-one' and 'screen-two'. Screen one is just empty screen so it doesn't have memory leaks and is used as reference and screen two contains some material components.

**Steps to reproduce:**
Example 1: [StackBlitz Material input example](https://stackblitz.com/github/EverydayWebDev/simple-material-project/tree/mat-input)
Screen two contains only mat-form-field with nested input.
1. Start with Screen One
2. Navigate to screen two by clicking Screen Two button on left menu
3. Navigate back to Screen One by clicking on menu button
4. Open Chrome Dev tools navigate to the memory tab (in case of stackblitz select VM instance webcontainer) and take a heap snapshot


Actual Behavior:
Dev tools memory profiling shows 1 Detached Node

Beginnen Sie mit den drei verlinkten Reproduktionsprojekten für mat-form-field/input, mat-tab und mat-menu, führen Sie dann die Routenwechsel erneut durch und untersuchen Sie Chrome-Heap-Snapshots. Vergleichen Sie die sich ansammelnden abgetrennten Knoten zwischen den beschriebenen Angular Material-Versionen. Als erledigt gilt die Aufgabe, wenn die relevanten abgetrennten DOM-Knoten durch Garbage Collection freigegeben werden und sich nach wiederholter Navigation nicht ansammeln.

Vom Indexierungsmodell aus dem Issue-Text verfasst.