GeezerVison is showing angular.dev — Input • Angular
@Input(
arg?:
| string
| {
alias?: string;
required?: boolean;
transform?: (value: any) => any;
isSignal?: boolean;
},
);
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 declaration 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 {}