Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

input

The input function allows declaration of Angular inputs in directives and components.

See more...

      
      const input: InputFunction;
    

Description

There are two variants of inputs that can be declared:

  1. Optional inputs with an initial value.
  2. Required inputs that consumers need to set.

By default, the input function will declare optional inputs that always have an initial value. Required inputs can be declared using the input.required() function.

Inputs are signals. The values of an input are exposed as a Signal. The signal always holds the latest value of the input that is bound from the parent.

Further information is available in the Usage Notes...

Usage notes

To use signal-based inputs, import input from @angular/core.

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

Inside your component, introduce a new class member and initialize it with a call to input or input.required.

      
      @Component({
  ...
})
export class UserProfileComponent {
  firstName = input<string>();             // Signal<string|undefined>
  lastName  = input.required<string>();    // Signal<string>
  age       = input(0)                     // Signal<number>
}
    

Inside your component template, you can display values of the inputs by calling the signal.

      
      <span>{{firstName()}}</span>