DEV Community

Cristian Sifuentes
Cristian Sifuentes

Posted on

2 1 1 1 1

Angular 19: Mastering `input.required()` and Functional Inputs with Signals

input.required()

Angular 19 brings a modernized way to declare inputs using the functional input() API, including input.required<T>(), which replaces the classic @Input() decorator for standalone components and works beautifully with Signals.

If you want to master modern Angular and write reactive, performant components, this is a key tool in your toolbox.


What Is input() in Angular?

The input() function is part of Angular's functional input binding system, introduced in Angular 16 and stabilized in Angular 19. It allows you to declare inputs without decorators.

✅ Example

import { input } from '@angular/core';

export class MyComponent {
  userList = input.required<User[]>();
}
Enter fullscreen mode Exit fullscreen mode

Benefits Over @Input()

Feature Classic @Input() Functional input()
Decorator-free
Strong typing ⚠️ (with casting)
Required enforcement ✅ Throws if missing
Signal-compatible .signal built-in
Works with Standalone ✅ (designed for it)

input.required<T>() vs input.optional<T>()

input.required<T>()

  • Requires the parent to always pass a value
  • Throws a runtime error if missing
products = input.required<Product[]>();
Enter fullscreen mode Exit fullscreen mode

input.optional<T>()

  • Accepts undefined
  • Can include a default value
theme = input.optional<'light' | 'dark'>('light');
Enter fullscreen mode Exit fullscreen mode

Making Inputs Reactive with .signal

You can instantly convert any input into a reactive Signal:

userList = input.required<User[]>().signal;
Enter fullscreen mode Exit fullscreen mode

Now you can use userList() in the template or inside computed signals and effects.


Full Component Example

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

interface Product {
  id: number;
  name: string;
}

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: `
    <ul>
      <li *ngFor="let p of products()">{ p.name }</li>
    </ul>
  `,
})
export class ProductListComponent {
  products = input.required<Product[]>().signal;
}
Enter fullscreen mode Exit fullscreen mode

✔️ This component is:

  • Standalone
  • Strongly typed
  • Signal-based and reactive
  • Runtime-safe with input enforcement

Best Practices for Angular 19

Rule Why
Use input.required() for critical props Enforces safety
Prefer .signal when binding to templates Ensures reactivity
Avoid mutable structures (e.g. .push()) Signals react to reference changes
Combine with OnPush Optimizes rendering

Final Thoughts

Angular 19 continues the shift toward reactive, composable, and standalone-friendly components. input.required() and input.optional() are a huge leap forward in how we define and enforce inputs—especially when paired with Signals.

Leave decorators behind. Embrace the functional future of Angular.

Happy coding, and may all your inputs be safely typed and reactively bound! ⚡

angular #typescript #signals #frontend #architecture

Dev Diairies image

User Feedback & The Pivot That Saved The Project ↪️

We’re following the journey of a dev team building on the Stellar Network as they go from hackathon idea to funded startup, testing their product in the real world and adapting as they go.

Watch full video 🎥

Top comments (1)

Collapse
 
nevodavid profile image
Nevo David

Neat, Angular 19 makes inputs easier and safer to use; it's pretty good

Feature flag article image

Create a feature flag in your IDE in 5 minutes with LaunchDarkly’s MCP server 🏁

How to create, evaluate, and modify flags from within your IDE or AI client using natural language with LaunchDarkly's new MCP server. Follow along with this tutorial for step by step instructions.

Read full post

👋 Kindness is contagious

Sign in to DEV to enjoy its full potential—unlock a customized interface with dark mode, personal reading preferences, and more.

Okay