Training Trains Internship
Student login
← Angular learning path
Angular · Module 3 of 10

Data binding

Connect class data to the template with interpolation, property, event and two-way binding.

📖 Key ideas

  1. Interpolation shows values: {{ title }}.
  2. Property binding sets properties: [src]="imageUrl".
  3. Event binding listens: (click)="save()".
  4. Two-way binding: [(ngModel)]="name" (needs FormsModule).
  5. Banana in a box: [( )] = two-way.
💡 Real-life example: Binding is a two-way radio: the class talks to the template and the template talks back.
{{ }}Interpolation of a value
[prop]Property binding
(event)Event binding
[(ngModel)]Two-way binding