input() Function in Angular With Examples

In this tutorial we'll see what is input() function in Angular and how to use it for facilitating parent-child communication.

input() in Angular

Angular input() function was released in version 17 as a part of Angular's signal based API. This input() function provides another way than the @Input decorator for parent-child communication.

Angular input() function returns a signal based property that automatically reacts to the changes from the parent. That makes the component data flow more streamlined and reactive.

How to define input

First thing is to import input from @angular/core.

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

1. input() as optional

You can define input as optional which is the default option.

name = input<string>();

You can also define it with a default value. This default value is used if no value is passed from the parent.

name = input<string>(‘TestUser’);

2. Required inputs

You can also define input as a required value. Using input.required() enforces that a value must be provided when the component is used, and Angular will throw a build-time error if it's missing.

name=input.required<string>()

input() in Angular examples

Let's say we have an array of User objects and we want to use a presentational component (a child component) to display user data, where user data is passed from a container component (parent component).

User Model class

export class User {
  id: number;
  firstName : string;
  lastName : string;
  age : number;
  constructor(id:number, firstName: string, lastName: string, age: number) {
    this.id = id;
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }
}

users.component.ts (Parent Component)

import { Component } from "@angular/core";
import { User } from "../models/user.model";

@Component({
  selector:'app-users',
  templateUrl: './users.component.html',
  standalone:false
})
export class UsersComponent{    
  users: User[] = [
    new User(1, 'Ram', 'Tiwari', 34),
    new User(2, 'Agatha', 'Christie', 23),
    new User(3, 'Mahesh', 'Agastya', 45),
  ]
}

users.component.html

<ul>
  @for(user of users; track user.id){
    <li>
      <app-user [user]="user"></app-user>
    </li>
  }
</ul>

user.component.ts (Child component)

import { Component, computed, input } from "@angular/core";
import { User } from "../models/user.model";

@Component({
  selector:'app-user',
  templateUrl: './user.component.html',
  standalone:false
})
export class UserComponent{ 
  user = input.required<User>();
}

As you can see user is defined as input.required here, so parent must pass the value for user.

user.component.html

{{user().firstName}} {{user().lastName}} {{user().age}}

Inputs are signals, so user is a signal that is why it has to be accessed with round brackets i.e. user().

Now, suppose you need to display full name. Since inputs are signal so you can create a computed signal to compute the full name by concatenating first name and last name.

user.component.ts

import { Component, computed, input } from "@angular/core";
import { User } from "../models/user.model";

@Component({
  selector:'app-user',
  templateUrl: './user.component.html',
  standalone:false
})
export class UserComponent{ 
  user = input.required<User>();
  fullName = computed(() => {
    const u = this.user();
    return u.firstName + " " + u.lastName
  });
}

user.component.html

{{fullName()}}

Configuring inputs

The input function accepts a config object as a second parameter that lets you change the way that input works.

Input transforms

You can specify a transform function to change the value of an input when it's set by Angular.

For example, if you are getting a string value and you want to trim the input value then you can provide a transform function to do it.

@Component({
  selector: 'app-username',
  /*...*/
})
export class UserComponent {
  name = input('', {transform: trimString});
}
function trimString(value: string | undefined): string {
  return value?.trim() ?? '';
}

Input aliases

You can specify the alias option to change the name of an input in templates.

@Component({
    selector:'app-user',
    templateUrl: './user.component.html',
    standalone:false
})
export class UserComponent{ 
    user = input.required<User>({alias:'userdata'});
}

Here userdata alias is given to the user input. Then in the call to this component

<app-user [userdata]="user"></app-user>

That's all for this topic input() Function in Angular With Examples. If you have any doubt or any suggestions to make please drop a comment. Thanks!

>>>Return to Angular Tutorial Page

Related Topics

You may also like-

Tech Tutorials

Tuesday, November 25, 2025