CODEWITHSUNDEEP
angularngtemplateoutlet
Maksat Madeniyetov
Maksat Madeniyetov

Reputation: 41

What is the difference between TemplateRef<{ $implicit: WidgetState }>; and TemplateRef<WidgetState>; in Angular (ngTemplateOutletContext)

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

Upvotes: 0

Views: 82

Answers (1)

Joe
Joe

Reputation: 26

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>.

Upvotes: 1

Related Questions