Angular 2 bindings are causing the following markup, notice the comment nodes separating the text nodes.

<div _ngcontent-c6="" class="tasks-count">
<!--bindings={
  "ng-reflect-ng-if": "4"
}-->
<!----> 
4 
<!--bindings={
  "ng-reflect-ng-plural": "4"
}--><!----><!---->
tasks left 
<!--bindings={
  "ng-reflect-ng-if": "false"
}-->
</div>


What is the expected result?

The above markup should be read as "4 tasks left" by Chromevox


What happens instead? Read as "4"


Please provide any additional information below. Attach a screenshot if
possible.