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

Decorator that marks a class field as an input property and supplies configuration metadata. The input property is bound to a DOM property in the template. During change detection, Angular automatically updates the data property with the DOM property's value.

OptionDescription
alias?

The name of the DOM property to which the input property is bound.

required?

Whether the input is required for the directive to function.

transform?

Function with which to transform the input value before assigning it to the directive instance.

See also

Options

The name of the DOM property to which the input property is bound.

      
      alias?: string
    

Whether the input is required for the directive to function.

      
      required?: boolean
    

Function with which to transform the input value before assigning it to the directive instance.

      
      transform?: (value: any) => any
    

Usage notes

You can supply an optional name to use in templates when the component is instantiated, that maps to the name of the bound property. By default, the original name of the bound property is used for input binding.

The following example creates a component with two input properties, one of which is given a special binding name.

      
      import { Component, Input, numberAttribute, booleanAttribute } from '@angular/core';
@Component({
  selector: 'bank-account',
  template: `
    Bank Name: {{bankName}}
    Account Id: {{id}}
    Account Status: {{status ? 'Active' : 'InActive'}}
  `
})
class BankAccount {
  // This property is bound using its original name.
  // Defining argument required as true inside the Input Decorator
  // makes this property deceleration as mandatory
  @Input({ required: true }) bankName!: string;
  // Argument alias makes this property value is bound to a different property name
  // when this component is instantiated in a template.
  // Argument transform convert the input value from string to number
  @Input({ alias:'account-id', transform: numberAttribute }) id: number;
  // Argument transform the input value from string to boolean
  @Input({ transform: booleanAttribute }) status: boolean;
  // this property is not bound, and is not automatically updated by Angular
  normalizedBankName: string;
}

@Component({
  selector: 'app',
  template: `
    <bank-account bankName="RBC" account-id="4747" status="true"></bank-account>
  `
})
class App {}