Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як працює змінна $implicit у контексті шаблону?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

В Angular `$implicit` - це спеціальна змінна контексту шаблону, яка використовується для **передавання «неявного» значення в** `ng-template` **або структурну директиву**, коли не хочеться явно вказувати ім'я змінної.

## Основні моменти

1. **Використання з** `ng-template`:

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

- Тут `let-user` отримує значення з контексту.
- Якщо контекст переданий через `$implicit`, ім'я змінної можна опустити:

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

- У шаблоні `let-user` автоматично отримає значення `currentUser`.

2. **Застосування**:

- `$implicit` зручний, коли шаблон очікує **одне основне значення**, щоб не створювати явне ім'я.
- Дозволяє писати шаблон універсально, не прив'язуючись до конкретного імені властивості.

3. **Приклад з директивою**:

```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` автоматично стає `$implicit` у шаблоні, доступним через `let-item`.

Іншими словами, `$implicit` - це **«неявна» змінна для передавання основного значення в шаблон**, яка дозволяє зробити шаблони більш універсальними та зручними.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати164 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.