Directives, Pipes, Template Control Flow, and Reusability Patterns
Learn how Angular changes rendered DOM structure, formats values, and encourages template reuse without duplicating logic.
Inside this chapter
- Structural and Attribute Directives
- Built-In Directives You Use Frequently
- Pipes for Display Formatting
- Avoiding Template Complexity
- Business Example
Series navigation
Study the chapters in order for the clearest path from Angular fundamentals to advanced architecture, testing, performance, and deployment. Use the navigation at the bottom to move smoothly across the full tutorial series.
Structural and Attribute Directives
Directives extend template behavior. Structural directives add or remove DOM structure, while attribute directives modify appearance or behavior of existing elements.
<div *ngIf="isLoggedIn">Welcome back</div>
<li *ngFor="let course of courses">{{ course.title }}</li>Depending on Angular version, teams may also encounter newer control-flow syntax. The key beginner concept is still the same: templates can render conditionally and repeatedly from data.
Built-In Directives You Use Frequently
*ngIffor conditional rendering*ngForfor loops[ngClass]for dynamic CSS classes[ngStyle]for dynamic stylesngModelin template-driven forms
Pipes for Display Formatting
<p>{{ price | currency:'USD' }}</p>
<p>{{ createdAt | date:'medium' }}</p>Pipes format values for display without changing the underlying data. Currency, date, uppercase, lowercase, percent, and custom pipes are common examples.
Avoiding Template Complexity
A common beginner mistake is placing too much logic directly inside templates. If expressions become difficult to read, move logic into the component class or a service. Templates should stay expressive, not crowded.
Business Example
An order table may highlight overdue invoices with [ngClass], show a date pipe for due dates, and use conditional rendering to hide actions for locked records. These patterns appear in almost every real UI.