Template Syntax
Property Binding
Make your HTML dynamic. Property Binding is the remote control that allows you to manipulate HTML elements directly from your TypeScript code.
In static HTML, everything is fixed: <img src="logo.png">. But in a real app, things change. The user uploads a new profile picture, or a button needs to be disabled while saving.
For this, we use square brackets[ ]. They tell Angular: "Hey, stop! This is no longer plain text. Evaluate this as TypeScript code." With this, we connect ("bind") a variable from our class directly to the HTML attribute.
1. The Simulation
Change the values on the left in the "TypeScript Panel". Observe on the right how the HTML element reacts immediately. Pay special attention to the disabled status of the button.
User Profile
<img [src]="currentImg" />
<button
[disabled]="false"
[style.background]="#4ade80">
{{ buttonLabel }}
</button> 2. Implementation
There are two ways I use binding in everyday life: For standard HTML properties and for cosmetic changes (classes/styles).
Standard Binding
This is used constantly for src, href, value, or to pass data to child components via @Input.
Crucial: For boolean attributes (like disabled, checked, hidden), you MUST use this syntax. Interpolation (...) does not work there.
<!-- 1. Dynamic Attributes (Expects string) -->
<img [src]="userProfileImage" alt="User Avatar">
<!-- 2. Boolean Properties (Expects boolean) -->
<!-- If isProcessing is true, the button is disabled -->
<button [disabled]="isProcessing">
Save Changes
</button>
<!-- 3. Component Communication (@Input) -->
<!-- We pass the entire 'currentUser' object to the child -->
<app-user-card [user]="currentUser"></app-user-card>Class & Style Binding
Instead of building complicated strings for class="...", Angular offers an elegant syntax. [class.my-class]="condition" is extremely readable and clean.
<!-- 1. Style Binding -->
<!-- Logic directly in the template: Red if error, Green if fine -->
<div [style.color]="isError ? 'red' : 'green'">
{{ statusMessage }}
</div>
<!-- 2. Single Class Binding (The Clean Way) -->
<!-- Adds the class 'active' ONLY if isActive is true -->
<div [class.active]="isActive">
Tab Content
</div>
<!-- 3. Multiple Classes (Object Syntax) -->
<div [ngClass]="{ 'valid': isValid, 'required': isRequired }">
Form Field
</div>Interpolation vs. Binding: When to use what?
Use Interpolation {{ value }} only when you want to output text (e.g. inside a p tag).
Use Binding [property]="value" whenever you want to change the behavior or attributes of an HTML tag.