如何通过 HTML 将字符串传递到 ng-template 中？

Question

Lets say I have an ng-template like so:

<ng-template #templateRef>
 <button
  (click)="testClick()"
  Click me
 </button>
 <a
  I'm a link
 </a>
</ng-template>

And then I want to use it in my html template like

<ng-container
        [ngTemplateOutlet]="templateRef"
        [ngTemplateOutletContext]="asdf"
>
</ng-container>

Is there any way for me to pass one additional variable into the template so that depending on where I use the template in the html, I can pass a different string that I can use to set the value of a custom directive via property binding? IE I really want the end result to be

 <button
  (click)="testClick()"
  [customLocation]="top"
  Click me
 </button>
 <a
  [customLocation]="top"
  I'm a link
 >
 </a>

and

 <button
  (click)="testClick()"
  [customLocation]="bottom"
  Click me
 </button>
 <a
  [customLocation]="bottom"
  I'm a link
 >
 </a>

So when I use the template like

    <ng-container
            [ngTemplateOutlet]="templateRef"
            [ngTemplateOutletContext]="asdf"
    >
    </ng-container>

I just want to leave everything that's currently there as-is and pass one more variable into the container that will get put as the value for customLocation. Can this be done? Any help is appreciated

Answer 1

templates have a context. Here we create a template variable named location thanks to the syntax let-location . The variable will be binded to the $implicit property of the context.

<ng-template #templateRef let-location>
 <button
  [customLocation]="location"
 </button>
</ng-template>

<ng-container
  [ngTemplateOutlet]="templateRef"
  [ngTemplateOutletContext]="{$implicit: 'top'}"
>
</ng-container>

Note that it's possible to have template variables by naming them. It's explained in https://angular.io/api/common/NgTemplateOutlet .