0

template:

    <div class="widget-content">
      <ng-container
        [ngTemplateOutlet]="contentTemplate || defaultWidgetContent"
        [ngTemplateOutletContext]="{ $implicit: state }"
      ></ng-container>
      <ng-template #defaultWidgetContent>
        <div class="sky-condition">{{ state.data.skyCondition === 'sunny' ? '☀️' : '☁️' }}</div>
        <div class="temperature">{{state.data.temperature}}°C</div>
      </ng-template>
    </div>

component:

@Input() contentTemplate!: TemplateRef<{ $implicit: WidgetState }>;

Here, we can use

TemplateRef<{ $implicit: WidgetState }>

and

TemplateRef<WidgetState>

I know what is $implicit, but I do not get their difference

Both versions are equivalent and functionally the same.

Is TemplateRef<{ $implicit: WidgetState }> a bit more expressive version of TemplateRef< WidgetState> ?

that's all?

Tutorial: https://www.youtube.com/watch?v=vfPVdJ2oQlM

Code: https://github.com/DMezhenskyi/angular-template-outlet-example/commit/94d9e86055c04c5093b6bc84a8bf812dce22d9b7

Maksat Madeniyetov
  • 3
  • 2
  • [This template](https://github.com/MintPlayer/mintplayer-ng-bootstrap/blob/master/apps/ng-bootstrap-demo/src/app/pages/advanced/datatables/datatables.component.html#L13-L17) is [rendered here](https://github.com/MintPlayer/mintplayer-ng-bootstrap/blob/master/libs/mintplayer-ng-bootstrap/datatable/src/datatable/datatable.component.html#L16). The object passed as `$implicit` ends up in the `artist` template variable (`let artist="$implicit"` or in short `let artist`) – Pieterjan Aug 30 '23 at 06:28

2 Answers2

0

Yes, you are right:

  1. Both versions are equivalent and functionally the same.
  2. TemplateRef<{ $implicit: WidgetState }> is a bit more expressive version of TemplateRef<WidgetState>.
ahuemmer
  • 1,653
  • 9
  • 22
  • 29
Joe
  • 1
  • 1
0

This is a new feature of Angular so no one knows

Simon
  • 1
  • Joe just copy and paste authors questions It would be better if you could elaborate more on their difference between TemplateRef<{ $implicit: WidgetState }> and TemplateRef< WidgetState> – Simon Aug 30 '23 at 06:18
  • 1
    But, you are supposed to post an answer – Maksat Madeniyetov Aug 30 '23 at 07:09