{"id":2019,"date":"2017-05-07T20:05:06","date_gmt":"2017-05-07T20:05:06","guid":{"rendered":"http:\/\/salientsoft.co.uk\/?p=2019"},"modified":"2018-10-10T17:15:57","modified_gmt":"2018-10-10T17:15:57","slug":"angular-2-expressions-containing-observables-cause-null-glitch-on-page-display","status":"publish","type":"post","link":"https:\/\/salientsoft.co.uk\/?p=2019","title":{"rendered":"Angular 2 expressions containing observables cause null glitch on page display"},"content":{"rendered":"

The following expressions caused a brief glitch whereby null<\/i><\/strong> was displayed prior to the observable locationsCount<\/em> emitting its value:-<\/p>\n

\n
<span text-capitalize>show all{{showAllActive ? ' ' + (locationsCount | async) : ''}}<\/span><\/pre>\n<\/blockquote>\n
This makes sense as the observable with its async pipe, | async<\/em> , which handles the observable, is part of a string expression. In other cases where the observable is e.g. a returned list, then you would just get an empty list with no entries. However in this case, Angular needed to evaluate and display the expression and so null<\/u> was briefly displayed instead of the value of locationsCount<\/em>.<\/p>\n
The easiest way around this is to use a logical or<\/em><\/strong> which acts as a null coalescing operator in JavaScript\/TypeScript, to replace the null with a suitable constant string:-<\/p>\n
\n
<span text-capitalize>show all{{showAllActive ? ' ' + (locationsCount | async)||' ' : ''}}<\/span><\/pre>\n<\/blockquote>\n
The use of (locationsCount | async) || \u2018 \u2018<\/em>  checks the first operand regardless of type, and if it is falsey, the second operand is taken. This is explained in this post here<\/a>.<\/p>\n
An alternative, a more complex solution which also worked in my case and may be interesting in other cases, is to concatenate the observable with another observable which emits a constant string using Observable.of()<\/a>. The concat<\/em> method emits all the values from each of the passed observables in turn, proceeding to the next one when an observable closes, as detailed in the RxJS api docs here<\/a>. Therefore, the constant observable emits a value and completes\/closes immediately which prevents the null glitch, followed by the locationsCount observable when it finally emits a value (which came from a mapped http api call):-<\/p>\n
initial version without constant observable:-<\/p>\n
\n
this.locationsCount = this.locationsAutoCompleteService.getLocationsCount()
  .map(count => {
    let countString: string = this.formatLocationsCount(count);
    return countString;
  });<\/pre>\n<\/blockquote>\n
Alternative version with concatenated constant observable:-<\/p>\n
\n
this.locationsCount = Observable.of(' ').concat(
    this.locationsAutoCompleteService.getLocationsCount()
    .map(count => {
      let countString: string = this.formatLocationsCount(count);
      return countString;
    })
  );<\/pre>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
The following expressions caused a brief glitch whereby null was displayed prior to the observable locationsCount emitting its value:- <span text-capitalize>show all{{showAllActive ? ‘ ‘ + (locationsCount | async) : ”}}<\/span> This makes sense as the observable with its async pipe, | async , which handles the observable, is part of a string expression. In […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[198],"tags":[40,16],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2019"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2019"}],"version-history":[{"count":12,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2019\/revisions"}],"predecessor-version":[{"id":2032,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2019\/revisions\/2032"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}