Question: Binding to undefined object produces error, but binding to empty object cast to interface is OK

When I go to the hero details component (see below), I get a binding error briefly in the console because the Hero.name binding fails as the Hero is not yet back from the promise from the http service (however briefly). Makes sense. I prefer not to ngIf things either. So I did this to make the Hero initialize to an object cast to the Hero interface. Should we have to do that?

  hero: Hero = <Hero>{};

and the original code …

import {Component, View} from 'angular2/angular2';
import {RouteParams} from 'angular2/router';
import {Hero} from './hero';
import {HeroService} from './hero-service';
import {HERO_DIRECTIVES} from './hero-directives';

@Component({selector: 'my-hero-detail'})
@View({
  templateUrl: 'app/hero-detail-component.html',
  directives: [HERO_DIRECTIVES]
})
export class HeroDetailComponent {
  hero: Hero; // this is what I changed to cast it

  constructor(private _heroService: HeroService, private _routeParams: RouteParams) {
    let id = +_routeParams.get('id');
    this._heroService.getHero(id).then(hero => this.hero = hero);
  }
}

[pkozlowski-opensource]

I get a binding error briefly in the console because the Hero.name binding fails as the Hero is not yet back from the promise

@johnpapa are you talking about a binding in a template? Sth like {{hero.name}}? If so you can use the Elvis operator - sth like {{hero?.name}}.

Should we have to do that?

Hope that the above answers the question so going to close this one for now. Happy to re-open if more discussion is needed and / or your use-case is different.

[pkozlowski-opensource]

I am just curious why this fixes it too hero: Hero = <Hero>{};

Well, assuming that in your template you’ve got sth like {{hero.name}} in a template the hero: Hero = <Hero>{}; line “works” since it initialises the hero field to an empty object instead of null.