Angular Memory leak: simple input resulting in detached nodes

I have generated angular app for the test purpose, created Page1 and Page2 components. is the code for Page2

TypeScript (Page2Component)

import { Component, OnDestroy } from '@angular/core';

@Component({
selector: 'app-page2',
standalone: true,
imports: [],
templateUrl: './page2.component.html',
styleUrls: ['./page2.component.scss'] // Corrected to `styleUrls`
})
export class Page2Component implements OnDestroy {
inputText: string = '';

ngOnDestroy() {
// Clear the input text or perform other cleanup actions
this.inputText = '';
}
}


HTML (page2.component.html)

<p>page2 works!</p>
<div>
<input type="text" [(ngModel)]="inputText" />
</div>


Steps to reproduce the issue:

1. Navigate to page2, type something in the input.
2. Navigate to page1, take snapshot.

I see page2 in detached nodes, cause I have typed in the input field. If I do not type in the field then it's not present.

Please someone explain me why typing inside the input causing detached nodes? I don't have any subscriptions and it is just above simple components, thanks in advance

I was not expecting memory leak

Continue reading...