Suggest an edit

Improve this article

Refine the answer for “How does the $implicit variable work in 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, `$implicit` is a special template context variable used to **pass an "implicit" value into** `ng-template` **or a structural directive**, when you do not want to explicitly name the variable.

## Main points

1. **Use with** `ng-template`:

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

- Here `let-user` gets its value from the context.
- If the context is passed via `$implicit`, the variable name can be omitted:

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

- In the template, `let-user` will automatically get the value of `currentUser`.

2. **Application**:

- `$implicit` is convenient when a template expects **one main value**, so you do not need to create an explicit name.
- Allows writing a template generically, without tying it to a specific property name.

3. **Example with a directive**:

```html
<ng-template let-item>
  <p>{{ item }}</p>
</ng-template>

<ng-container *ngFor="let i of items; let t = tpl">
  <ng-container *ngTemplateOutlet="tpl; context: { $implicit: i }"></ng-container>
</ng-container>
```

- `i` automatically becomes `$implicit` in the template, accessible through `let-item`.

In other words, `$implicit` is an **"implicit" variable for passing the main value into a template**, which lets templates be more generic and convenient.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.