title: Angular 6 ngTemplateOutlet inside ngFor multiple context
body: <p>let's assume I have the following component:</p>
  
  <pre><code>@Component({
    selector: 'todo-lib',
    template: `
  &lt;li *ngFor="let todo of libService.todos"&gt;
    &lt;div class="view"&gt;
      &lt;label&gt;{{todo.title}}&lt;/label&gt;
      &lt;ng-container *ngTemplateOutlet="incomingTemplate;context:ctx"&gt;&lt;/ng-container&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  
  &lt;ng-template #incomingTemplate let-service="templateService"&gt;
  &lt;button (click)="service.removeTodo(todo)"&gt;delete&lt;/button&gt;
  &lt;/ng-template&gt;
  `,
    styles: []
  })
  export class TodoLibComponent implements OnInit {
  
    ctx = {
      templateService: this.libService
    };
  </code></pre>
  
  <p>The list of todos is inside the libService. I don't publish it here, since its logic doesn't matter. The "ng-template" will be injected from another component and will add a delete button to my todo list. That means: Typically there is no delete option, except the "ng-template" will be provided</p>
  
  <p>However, this approach will fail with the following error:</p>
  
  <pre><code>message: "_v.context.todo is undefined"
  </code></pre>
  
  <p>since "todo" is not part of the context object 'ctx' I can't access it. To achieve this I would be forced to do it like this: </p>
  
  <pre><code>&lt;ng-container *ngTemplateOutlet="incomingTemplate;context:{ todo: todo}"&gt;
  </code></pre>
  
  <p>This would let me access the todo object but not the service anymore.</p>
  
  <p>It seems that I can't access the 'todo' property defined by the ngFor AND the service defined in the 'ctx' property at the same time. Is there a solution to achieve both?</p>
  
  <p>Cheers </p>