@Component({
selector: 'bank-account',
template: `
Bank Name: {{bankName}}
Account Id: {{id}}
`
})
class BankAccount {
// This property is bound using its original name.
@Input() bankName: string;
// this property value is bound to a different property name
// when this component is instantiated in a template.
@Input('account-id') id: string;
// 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"></bank-account>
`
})
class App {}
@Input() and @Output() give a child component a way to communicate
with its parent component.
@Input() lets a parent component update data in the child component.
@Output() lets the child send data to a parent component.
// Please click source link for more details