Angular 6 for Enterprise-Ready Web Applications

Safe navigation operator

Angular implements the safe navigation operation ?. to prevent unintended traversals of undefined objects. So, instead of writing initialization code and having to deal with template values, let's just update the template:

src/app/current-weather/current-weather.component.html<div>  <div>    <span>{{current?.city}}, {{current?.country}}</span>    <span>{{current?.date | date:'fullDate'}}</span>  </div>  <div>    <img [src]='current?.image'>    <span>{{current?.temperature}}℉</span>  </div>  <div>    {{current?.description}}  </div></div>

This time, we didn't have to make up defaults, and we let Angular deal with displaying undefined bindings. You will note that just like the initialization fix, the errors have been reduced from 12 to ...