Skip to main content

Як використовувати сигнал у шаблоні компонента?

AngularJunior~1 хв читання

У шаблоні сигнал використовують як функцію - просто викликають () після імені.

Приклад:

ts

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <p>Лічильник: {{ counter() }}</p>
    <button (click)="counter.update(v => v + 1)">+</button>
  `
})
export class CounterComponent {
  counter = signal(0);
}

Як це працює:

counter() - читання сигналу прямо в шаблоні;
Angular сам стежить за ним і оновлює тільки цю ділянку, коли значення змінюється;
нічого підписувати чи відписувати не потрібно - все реактивно.

Важливо: круглі дужки обов'язкові - без них Angular не дізнається, що це виклик сигналу.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.