hardFrontend

What are signal inputs and model() in modern Angular?

Q: What are signal inputs and model() in modern Angular?

**Core concept.** input() creates a **signal-based component input** — you read it like a signal ( this.value() ) and it's reactive in computeds/effects, replacing the decorator @Input() . model() creates a **two-way bindable** signal input, so a parent can use [(value)] — it bundles an input and its valueChange output. input() signal input (read-only) model() two-way: [(value)]

1.0k views

Understand the problem

Explain signal-based inputs.

signalsinputs

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

input() and model()

import { Component, input, model, computed } from '@angular/core';

@Component({
  selector: 'app-rating',
  standalone: true,
  template: '<button (click)="bump()">{{ label() }}: {{ value() }}</button>',
})
export class RatingComponent {
  label = input('Rating');           // signal input  (parent: [label]="...")
  value = model(0);                  // two-way        (parent: [(value)]="...")
  label2 = computed(() => this.label().toUpperCase());
  bump() { this.value.update(v => v + 1); }  // child can write a model()
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you handle micro-frontend architecture in Angular using Module Federation?

What is the purpose of the KeyValueDiffers and IterableDiffers services?