Modern Angular Course 12: Conditional Rendering with @if and @else

In this video, we make the product cards smarter by conditionally rendering parts of the template. In the previous video, we passed real product data to each card using the input() API — now we use Angular's modern @if and @else control flow to display sale badges and pricing variations only when a product is on sale. Not all products have the same data. Some have a current price only, while others include an original price and a promotion label. Instead of always rendering every element, we show only what makes sense for each product. In this video, you'll learn: • How to conditionally render UI blocks with @if • How to use @if / @else for branching display logic • How to apply conditional class binding for sale card styling • How to style sale badges, current prices, and strikethrough original prices • How to keep templates readable as conditions grow • Why showing only relevant information improves the user experience 📦 Source code repository: https://github.com/loiane/modern-angular 🎥 Full Modern Angular course playlist: https://www.youtube.com/playlist?list=PLGxZ4Rq3BOBqJfR254ZMuBfFRMeyr162U 📌 This course is for: • Developers new to Angular • Developers upgrading from older Angular versions 🔔 Subscribe to follow the full Modern Angular course. ⏱️ Chapters 00:00 Why Conditional Rendering Matters 00:46 Adding Sale Data to Sample Products 01:03 First Conditional Block with @if 02:49 Using @if / @else for Price Display 04:04 Styling Sale and Regular States 04:38 Recap & Next Steps #ModernAngular #AngularCourse