input
The input
function allows declaration of Angular inputs in directives
and components.
const input: InputFunction;
Description
There are two variants of inputs that can be declared:
- Optional inputs with an initial value.
- 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>