Create local binding context in Angular template

Question

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?

Answer 1

It is possible to define a structure directive similar to *ngIf and *ngFor called *bindingContext:

<div *bindingContext = "let  a_variable  be  an_expression">

Angular does a lot of magic behind the scenes with this syntax. First of all, the asterics creates an <ng-template> which is used right away. Then the micro syntax is evaluated and a directive called bindingContextBe is called. This directive makes an_expression available as $implicit in the template context, which in turn is assigned to a_variable

There is full explanation in the Angular documentation.

I implemented BindingContext as follows:

import {Directive, EmbeddedViewRef, Input, 
        TemplateRef, ViewContainerRef} from '@angular/core';

@Directive({selector: '[bindingContextBe]'})
export class BindingContextDirective {
  private context = new BindingContextDirectiveContext();
  private viewRef: EmbeddedViewRef<BindingContextDirectiveContext>|null = null;

  constructor(private viewContainer: ViewContainerRef,
      private templateRef: TemplateRef<BindingContextDirectiveContext>) {
  }

  @Input()
  set bindingContextBe(context: any) {
    this.context.$implicit = context;
    if (!this.viewRef) {
      this.viewContainer.clear();
      this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef,
                                                           this.context);
    }
  }
}

export class BindingContextDirectiveContext {
  public $implicit: any = null;
}

Usage example:

Full:

<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>
    <input [(ngModel)]="model.some.deeply.nested.property.with.a.donut.name">
</div>

<hr>

Alias:

<div *bindingContext="let food be model.some.deeply.nested.property.with.a.donut">
    <div>{{food.name}}</div>
    <div>{{food.calories}}</div>
    <div>{{food.deliciousness}}</div>
    <input [(ngModel)]="food.name">
</div>

PS: Don't forget to declare the directing in your module.