In a template, how do I bind to a deeply nested property of an object delivered by an observable?

Question

I have an object that I get via an observable called compModel. It gives me a large configuration object that I need to use to adjust pieces of dom. One of the things I want to do is make some checkboxes be checked/unchecked according to this model, but I can't access their respective properties.

1. Evaluates the compModel observable as truthy and checks the box when data is received.

<input type="checkbox" checked="{{compModel | async}}">

2. When obj is defined on the compModel eventually this evaluates to null and the box is not checked at any point. I think this is interpreted as passing the obj property of an observable to the async pipe, which returns null because the observable itself doesn't have obj, the future data does.

<input type="checkbox" checked="{{compModel.obj | async}}">

3. I get an error saying that angular Cannot read property boolean of undefined. The boolean value here is what I'm after. How do I get it?

<input type="checkbox" checked="{{compModel.obj.boolean | async}}">

Answer 1

<input type="checkbox" checked="{{(compModel | async)?.obj?.boolean}}">

You need to pipe the actual observable with async and then conditionally access it's future properties using the elvis operator to handle the case where they're not available yet.