Skip to main content

How to use a signal in a component template?

AngularJunior~1 min read

In a template, a signal is used as a function: you simply call () after its name.

Example:

ts

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

@Component({
  selector: 'app-counter',
  template: `
    <p>Counter: {{ counter() }}</p>
    <button (click)="counter.update(v => v + 1)">+</button>
  `
})
export class CounterComponent {
  counter = signal(0);
}

How it works:

counter() reads the signal right in the template;
Angular tracks it on its own and updates only that area when the value changes;
nothing needs to be subscribed or unsubscribed, everything is reactive.

Important: the parentheses are mandatory, without them Angular will not know that this is a signal call.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.