Input signals and model signals in Angular

Introduction

Input signals let a component receive data from outside. Model signals help track and update data inside the component easily.

When you want to pass data from a parent component to a child component.

When you need to react to changes in input data automatically.

When you want to keep the component's internal data reactive and update the UI smoothly.

When building forms or interactive UI elements that change based on user input.

When you want to separate data flow clearly between components.

Syntax

Angular

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

@Component({
  selector: 'app-child',
  standalone: true,
  template: `
    <p>Value: {{ value() }}</p>
  `
})
export class ChildComponent {
  @Input() value = signal('');
}

Input decorator marks a property as an input to receive data from a parent.

signal() creates a reactive value that updates the UI when changed.

Examples

This example shows a child component receiving a name input as a signal with a default value.

Angular

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

@Component({
  selector: 'app-child',
  standalone: true,
  template: `<p>{{ name() }}</p>`
})
export class ChildComponent {
  @Input() name = signal('Guest');
}

Here, a numeric signal count is passed as input to show a reactive counter value.

Angular

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <p>Count: {{ count() }}</p>
  `
})
export class CounterComponent {
  @Input() count = signal(0);
}

Sample Program

This example shows a parent component passing a signal parentMessage to a child component's input message. Clicking the button changes the message reactively in the child.

Angular

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

@Component({
  selector: 'app-child',
  standalone: true,
  template: `
    <p>Message: {{ message() }}</p>
  `
})
export class ChildComponent {
  @Input() message = signal('Hello');
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChildComponent],
  template: `
    <app-child [message]="parentMessage"></app-child>
    <button (click)="changeMessage()">Change Message</button>
  `
})
export class AppComponent {
  parentMessage = signal('Welcome!');

  changeMessage() {
    this.parentMessage.set('Hello from Parent!');
  }
}

Important Notes

Signals are functions you call to get the current value, like message().

Use .set(newValue) to update a signal's value and refresh the UI.

Input signals keep data reactive between parent and child components without extra code.

Summary

Input signals let components receive reactive data from parents.

Model signals inside components track and update data easily.

Using signals makes UI updates automatic and simple.