Conditional Rendering with @if
Show content conditionally with @if and @else.
Conditional Rendering with @if is a free Angular Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Built-in Control Flow
Modern Angular templates include built-in control flow blocks written with an at-symbol. They replace the older structural directives and need no imports.
The if Block
The at-if block conditionally renders content. You write an at-symbol followed by the word if, the condition in parentheses, and the content in curly braces.
// template:
// @if (loggedIn) {
// <p>Welcome back!</p>
// }Replacing ngIf
This replaces the old *ngIf structural directive. The new syntax is part of the template language, so there is nothing to import.
Reading a Signal in the Condition
The condition can be any expression, including a signal call.
// @if (count() > 0) {
// <p>You have items</p>
// }The else Block
An at-else block provides fallback content when the condition is false. It immediately follows the closing brace of the if block.
// @if (user) {
// <p>Hello {{ user.name }}</p>
// } @else {
// <p>Please log in</p>
// }else if Chains
You can chain conditions using at-else if, then a final at-else.
// @if (score >= 90) { <p>A</p> }
// @else if (score >= 80) { <p>B</p> }
// @else { <p>C</p> }Storing the Condition Result
The at-if block can bind the condition result to a local variable with the as keyword, useful for non-null narrowing.
// @if (user(); as u) {
// <p>{{ u.name }}</p>
// }Why the New Syntax
Built-in control flow is more readable, type-checked, and efficient than structural directives. It avoids the microsyntax and asterisk of the old directives.
No Container Element Needed
Unlike older patterns, the at-if block does not require a wrapper element or ng-template. The braces themselves delimit the conditional content.
Nesting Blocks
Control flow blocks can be nested freely. An at-if can contain another at-if, an at-for, and so on.
Combining with Bindings
Inside an at-if block you use the full template language: interpolation, property bindings, and event bindings all work normally.
Quick Check: Conditionals
The new conditional syntax.
Recap: Conditionals
You learned the at-if block for conditional rendering, with at-else and at-else if for alternatives, and the as keyword to capture the result. It replaces star-ngIf and needs no import. Next: looping with at-for.
Frequently asked questions
Is the “Conditional Rendering with @if” lesson free?
Yes — the full text of “Conditional Rendering with @if” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
What will I learn in “Conditional Rendering with @if”?
Show content conditionally with @if and @else. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Conditional Rendering with @if” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Conditional Rendering with @if
- Looping with @for
- Switching with @switch
- Deferred Loading with @defer