Suggest an edit

Improve this article

Refine the answer for “What is a template context?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

In Angular, the **template context** is an **object that holds the data and variables available inside** `ng-template` during its rendering. Through the context, the template receives values for local variables (`let-`) and `$implicit`.

## Main points

1. **Passing data into the template**:

```html
<ng-template #tpl let-user>
  <p>{{ user.name }}</p>
</ng-template>

<ng-container *ngTemplateOutlet="tpl; context: { $implicit: currentUser }"></ng-container>
```

- `context` is the object that passes the data.
- `$implicit` lets the template use a default value without an explicit variable name.

2. **Local variables through** `let-`:

- Variables can be declared in the template:

```html
<ng-template let-item="product">
  <p>{{ item.name }}</p>
</ng-template>
```

- `item` inside the template takes its value from the `product` property of the context object.

3. **Reusability**:

- The context makes the template **reusable**, allowing different data to be substituted on each render.

In other words, the **template context is a "data environment"** that Angular supplies to the template for local variables to work and for dynamic display.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts161 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.