Component

  • A component controls a patch of screen called a view.
  • Decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.
  • Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template.
@Component({
  selector: 'app-bank-account',
  inputs: ['bankName', 'id: account-id'],
  template: `
    Bank Name: {{ bankName }}
    Account Id: {{ id }}
  `
})
export class BankAccountComponent {
  bankName: string|null = null;
  id: string|null = null;

  // this property is not bound, and won't be automatically updated by Angular
  normalizedBankName: string|null = null;
}

@Component({
  selector: 'app-my-input',
  template: `
    <app-bank-account
      bankName="RBC"
      account-id="4747">
    </app-bank-account>
  `
})
export class MyInputComponent {
}

Component — Structure map

Clickable & Draggable!

Component — Related pages: