Input

Declares a data-bound input property.

Data-bound properties are automatically updated during change detection.

The Input annotation takes an optional parameter that specifies the name used when instantiating a component in the template. When not provided, the name of the decorated property is used.

Example

The following example creates a component with two input properties.

@Component(
   selector: 'bank-account',
   template: '''
     Bank Name: {{bankName}}
     Account Id: {{id}}
   ''')
 class BankAccount {
   @Input()
   String bankName;
 
   @Input('account-id')
   String id;
 
   // this property is not bound, and won't be automatically updated
   String normalizedBankName;
 }
 
 @Component(
   selector: 'app',
   template: '''
     <bank-account bank-name="RBC" account-id="4747"></bank-account>
   ''',
   directives: const [BankAccount])
 class App {}