Basics
Data binding & security
The four binding forms, property-vs-attribute, and built-in XSS sanitization.
Angular has four binding directions: interpolation {{ }} and property binding [prop] push class → DOM; event binding (event) sends DOM → class; two-way [(x)] is sugar for [x] + (xChange).
Binding is the dashboard wiring of a car: gauges read the engine (property binding), pedals send your input back (event binding), and the two-way trip computer does both.
Key concepts
1
Property binding sets the DOM property, not the HTML attribute — [disabled]="isBusy" toggles the live property with a real boolean, whereas attr. bindings ([attr.aria-label]) are for attributes with no property equivalent.
DOM property[disabled]="isBusy"attr.[attr.aria-label]
2
Angular sanitizes interpolated values by context, so binding untrusted HTML is safe by default; bypassing it with DomSanitizer.bypassSecurityTrustHtml is an explicit, audited decision.
sanitizesDomSanitizer.bypassSecurityTrustHtml
3
Pitfall: [(ngModel)] requires FormsModule and re-runs change detection on every keystroke — for large forms prefer reactive forms. Follow-up interviewers ask: "what is the difference between an attribute and a property?" — attributes initialise, properties hold the current live value.
Pitfall:Follow-up interviewers ask:[(ngModel)]FormsModule
typescript
@Component({
standalone: true,
imports: [FormsModule],
template: `
<input [value]="title"
(input)="title = $any($event.target).value" />
<button [disabled]="!title">Save</button>
<span [attr.aria-label]="title">{{ title }}</span>
<input [(ngModel)]="title" />
`,
})
export class EditorComponent { title = 'Draft'; }