Why does change detection work?

Question

JavaScript

The documentation says:

change detection process that runs after every DOM event: every keystroke, mouse move, timer tick, and server response.

Below is an example . The following happens in it:
1. the user enters a value in the field
2. presses enter
3. the entered value is written to the component variable
4. the field is cleared (DOM changes)
5. the list in the template
is
updated this line: to this: , then theoretically change detection should not work because the DOM does not change after pressing enter. The problem is that change detection works. And I don't understand why. Clarify please.
(keyup.enter)="addHero(box.value); box.value=''"
(keyup.enter)="addHero(box.value)"