Create local binding context in Angular template

Viewed 1597

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?

1 Answers
Related