angular: Text not displaying after form fields

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

In the attached project, the login page contains some text in a span tag with a class of error. This uses {{errorMessage}} field defined in login.component.ts and assigned a value.

This field does not display as is. Comment out the two input fields ahead of it and it will suddenly show up.

Expected behavior

The error message field should display always

Minimal reproduction of the problem with instructions

I have attached a minimal demo

What is the motivation / use case for changing the behavior?

It should work right.

Environment

Ubuntu/Firefox

Angular version: Latest

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [X


] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Note that I have deleted the e2e and node_modules directories to save space. login-test.zip