Angular·Angular from components to production

Binding and events

Use interpolation, property binding, class binding and event binding.

Intermediate 12 min read Lesson 3 of 300 Challenge included

What you will be able to do

Use interpolation for text.
Use [property] for DOM properties.
Use (event) for events.
Prefer class bindings over string concatenation.

In plain English

Angular templates bind state to the DOM. Property binding uses square brackets, events use parentheses and two-way binding uses [(ngModel)] or a signal model. Choose the narrowest binding that expresses intent.

template.htmlHTML

<button
  type="button"
  [class.active]="isActive"
  [disabled]="saving"
  (click)="save()">
  {{ saving ? 'Saving…' : 'Save' }}
</button>

Your turn

Bind a disabled state

Easy

Disable a button while a saving boolean is true.

HTML · starter

<button>

Check your understanding before moving on.

Knowledge checkQuestion 1

Which syntax binds an event?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Control flow and directives

Lesson 3 of 300 · 0% of course