Angular templates don't play well with strictNullChecks #19756

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] 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:
Currently if Typescript has strictNullChecks=true then it is very hard to work with variables that are nullable.

For example, if I have: hero?: Hero; inside my HeroDetailComponent class from the Heroes tutorial, then

<ng-container *ngIf="hero; else no_hero">
		<h2>{{hero.name}} details!</h2>
		<input ([hero])="hero.name" placeholder="name"/>
</ng-container>

Then there will be an error for hero.name as it might be null and the binding won't work.

Expected / new behavior:

The template engine should be able to determine that the variable hero is not null within the if statement and so both of the components above should work. Alternatively, it could add syntax to allow you to explicitly cast a variable to a more specific type that would pass this information further into the template.

Minimal reproduction of the problem with instructions:

Open up the Heroes demo and change hero to a nullable variable and add strictNullChecks into tsconfig.json

AngularJS version: 4.4.4

Browser: Chrome 61

Anything else:
Current workaround:

<ng-container *ngIf="hero; else no_hero; let HERO">
		<h2>{{HERO.name}} details!</h2>
		<input [ngModel]="HERO.name" (ngModelChange)="HERO.name=$event" placeholder="name"/>
	</ng-container>