Say I have a deeply nested object graph I'm binding to:
<div>{{model.rootProperty}}</div>
<div>
<div>{{model.some.deeply.nested.property.with.a.donut.name}}</div>
<div>{{model.some.deeply.nested.property.with.a.donut.calories}}</div>
<div>{{model.some.deeply.nested.property.with.a.donut.deliciousness}}</div>
</div>
I don't want to repeat that chain of accessors. I know I could expose a property on my viewmodel, but I'd prefer to some way to create a local context. My desired syntax would be something like:
<div>{{model.rootProperty}}</div>
<div [binding-context]="model.some.deeply.nested.property.with.a.donut">
<div>{{name}}</div>
<div>{{calories}}</div>
<div>{{deliciousness}}</div>
</div>
How would I go about that?
I tried creating a component whose template contained only <ng-content></ng-content>, but content transcluded this way still has the context of the component's parent component.
I know I could wrap the inner content in a <template> and use a template outlet in my component, but that's more markup than I'd prefer, and it seems that *ngFor doesn't need this.
Is this possible?