In this video, we move from component-only state into shared application state as we enter Phase 2 of the Modern Angular course. After wiring Add to Cart events with output() in the previous lesson, we now create a dedicated CartService so multiple parts of the app can read and update the same cart data. In this video, you'll learn: • Why shared cart state should live in a service instead of a component • How to create a singleton service with providedIn: 'root' • How to model cart state with a private signal • How to update signal state immutably with update() and spread syntax • How to inject CartService in ProductsGrid using inject() • Why keeping business logic in services helps components stay focused 📦 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 a Service? 02:10 Generate the CartService 03:52 Cart State with signal 04:41 addToCart with update 06:25 Injecting CartService in ProductsGrid 09:25 Quick Verification 10:11 What's Next #ModernAngular #AngularCourse

In this video, we tackle child-to-parent communication in Angular by wiring the "Add to Cart" button on our product cards to notify the parent products grid. In Video #11 we saw how `input()` sends data down from a parent to a child. Now we go the other way: the `ProductCard` component emits an event up to `ProductsGrid` using the `output()` function, so the parent can react when the user clicks "Add to Cart". In this video, you'll learn: • How child-to-parent communication works in modern Angular • How to declare an event channel with the `output()` function • How to emit typed values from a child component using `.emit()` • How to listen to custom component events with `(eventName)="handler($event)"` • Why presentational ("dumb") components only receive inputs and emit outputs • How `input()` and `output()` compare as the two directions of component communication 📦 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 soon #ModernAngular #AngularCourse

In this video, we continue Phase 2 of the Modern Angular course by moving from writable state to computed state. Now that searchTerm is in place, we use computed() to calculate a filtered product list, connect the UI to that computed value, and provide clear feedback when no results match. In this video, you'll learn: • How to create computed state with computed() • How to calculate filteredProducts from searchTerm and products • How to normalize search input with trim() and lowercase matching • How to switch @for rendering from products() to filteredProducts() • How to add an accessible no-results UI state with @empty • Why computed signals simplify reactive UI transformations 📦 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 Introduction 00:17 Add the Computed Filter 03:39 Update Template Rendering 04:08 Empty State Message 04:58 Recap and Pattern Reuse #ModernAngular #AngularCourse

In this video, we begin Phase 2 of the Modern Angular course, focused on state management patterns with signals. After building the product UI foundation in the previous lessons, we now add local search state in a practical way using writable signals inside ProductsGrid. In this video, you'll learn: • How to create writable local state with signal('') • How to read signal values in templates with function-call syntax • How to connect an input field to signal state using ngModel • How to understand signal read/write flow with ngModel and ngModelChange • How to update writable signals with set() and update() • Why writable signals keep local UI state explicit and predictable 📦 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 Writable Signals 01:12 Add a Writable Signal to ProductsGrid 01:58 Bind the Input in the Template 08:44 set() and update() Helper Methods 10:36 Recap and Next Video #ModernAngular #AngularCourse

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

In this video, we continue building the Modern Angular course project by connecting real data to our product cards. In the previous video, we rendered a list of products using signals and @for — but each card still showed placeholder content. Now we use Angular's modern signal-based input() API to pass product data from the parent ProductsGrid component to each child ProductCard. By the end, every card displays real product information, and we understand both required and optional inputs. In this video, you'll learn: • How parent-to-child communication works in Angular • How to create a required input with input.required • How to read input signals in templates with parentheses • How to pass data from parent to child using property binding • How to create optional inputs with default values using input(defaultValue) • The difference between the modern input() API and the legacy @Input() decorator 📦 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 Welcome & Context 00:31 Parent-to-Child Communication Pattern 01:26 Creating a Required Input with input.required() 03:07 Legacy @Input() Decorator Comparison 04:18 Seeing the Required Input Error 04:44 Rendering Input Data in the Template 05:37 Passing Product from Parent with Property Binding 06:54 Optional Inputs with Default Values 08:33 Common Pitfalls 09:04 Cleanup & Recap 09:34 What's Next #ModernAngular #AngularCourse

In this video, we continue building the Modern Angular course project by making our product list reactive. In the previous video, we set up the ProductsGrid and ProductCard components with static data — now it's time to connect everything to signals and render our product list dynamically. We start by defining a TypeScript interface for type safety, then store our product data in a signal and use Angular's modern @for syntax to render the list. We also handle the empty state with @empty and explore useful loop context variables. In this video, you'll learn: • How to define a TypeScript interface for type-safe product data • How to store reactive data in a signal • How to render lists using Angular's @for syntax with required track • Why track matters for DOM reconciliation and rendering performance • How to handle empty arrays with the @empty block • How to use loop context variables like $index, $first, $last, $even, $odd, and $count 📦 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 Welcome & Context 00:10 Creating the Product Interface 01:44 Creating the Products Signal 03:09 Reading the Signal in the Template 04:10 Rendering Lists with @for 06:32 *ngFor Reference (Legacy) 07:23 Handling Empty Lists with @empty 09:20 Loop Context Variables 11:05 What's Next #ModernAngular #AngularCourse

In this video, we continue building the real project in the Modern Angular course by creating the main products page UI. We already have Angular Material set up and a header in place, so in this step we focus on component structure — building a products grid and a reusable product card, all with clean separation of concerns and responsive layout. In this video, you'll learn: • How to organize components by feature using folder structure • How to create a products grid layout with CSS Grid • How to build a reusable product card with Angular Material • Why separation of concerns matters for component design • How standalone component imports work in practice • Why building UI first (outside-in development) leads to better architecture 📦 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 What We'll Do in This Video 00:38 Revisiting the Component Structure 01:21 Creating the Products Grid Component 02:30 Rendering the Grid in the App Component 03:59 Creating the Product Card Component 04:36 Building the Product Card UI 08:08 Laying Out the Products Grid 09:57 Why We're Not Using Data Yet 11:17 Reviewing What We Built 11:43 What's Next #ModernAngular #AngularCourse

In this video, we start shifting the Modern Angular course toward building a real project. We already have an Angular project created, so in this step we focus on setting a solid visual and structural foundation using Angular Material. In this video, you’ll learn: • How to add Angular Material using the CLI • How Material themes and global styles are configured • Why Angular Material is a good choice for real projects • How to create a reusable header component • How to use AppComponent as the application shell • How to apply modern, standalone Angular practices 📦 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 Welcome & Context 00:33 Project Component Structure 01:22 Adding Angular Material 04:13 Why Angular Material 05:06 Creating the Header Component 06:59 Using AppComponent as the Shell 07:12 Header UI with Material 13:17 Styling the Header 16:25 Standalone Imports 16:57 What's Next #ModernAngular #AngularCourse

In this video, we introduce effects and complete the core Signals mental model in Modern Angular. Effects allow you to react to signal changes and perform side effects in a controlled and predictable way. In this video, you’ll learn: • What effects are and why they exist • How effects differ from writable and computed signals • Common use cases for effects • What to avoid when using effects • How effects fit into Angular’s reactive model This video completes the Signals trilogy: • Writable signals (state) • Computed signals (derived state) • Effects (side effects) 📦 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 Introduction & Context 00:37 What Is an Effect 01:17 Creating an Effect 05:14 Common Mistakes with Effects 06:01 Wrap-Up #ModernAngular #AngularCourse

In this video, we dive into computed signals and learn how to model derived state in Modern Angular. Computed signals allow you to express relationships between pieces of state in a clear, predictable way; without duplicating logic or relying on methods in templates. In this video, you’ll learn: • What computed signals are • How computed signals differ from writable signals • When to use computed signals • How computed signals help avoid duplicated logic • Why computed signals are better than methods for derived state This video builds directly on the previous lesson about writable signals and continues our focus on local component state. 📦 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 Introduction & Context 00:18 What Is a Computed Signal 03:45 Creating a Computed Signal 06:23 Computed vs Methods 07:46 Why Computed Signals Are More Efficient 09:07 Cleaner Templates with Computed 09:31 Best Practices for Computed Signals 09:57 Wrap-Up and Next Steps #ModernAngular #AngularCourse

In this video, we introduce Angular Signals and use them to manage local component state as part of the Modern Angular course. Signals are a core building block of Modern Angular. They make state explicit, predictable, and easier to reason about. In this video, you’ll learn: • Why Angular introduced signals • How signals relate to change detection, RxJS, and Zone.js • The different types of signals (writable, computed, effects) • How to create and update a writable signal • How to use signals in templates This video focuses on local, synchronous UI state and builds on the previous lessons about components and templates. 📦 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 Introduction & Context 00:22 What Are Signals? 01:10 Why Signals Exist 02:30 Signals vs Regular Class Properties 04:10 Signal Types Overview 07:22 Creating a Writable Signal 09:50 Reading Signal Values 11:25 Updating Signals 13:10 Signals in Templates 15:30 Best Practices & Wrap-Up #ModernAngular #AngularCourse

In this video, we focus on Angular component templates and how components interact with the UI as part of the Modern Angular course. We’ll build on the standalone component created in the previous video and cover: • Displaying data with interpolation • Property binding • Event binding • Combining bindings for interactive components This video focuses on fundamentals and keeps things intentionally simple, no signals yet. 📦 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 Getting Interactive 01:30 Template Binding 04:03 Property & Event Binding 08:48 Next Steps #ModernAngular #AngularCourse

In this video, we create our first standalone Angular component as part of the Modern Angular course. This is a foundational step where we focus on understanding: • What a modern Angular component looks like • How standalone components work • How to run and verify tests • How to use a component selector in the application The goal is to build a solid foundation before adding more powerful concepts later in the course. 📦 Source code repository: https://github.com/loiane/modern-angular 🎥 Full Modern Angular course playlist: https://www.youtube.com/playlist?list=PLGxZ4Rq3BOBqJfR254ZMuBfFRMeyr162U ⏱️ Chapters 00:00 Getting Started 01:33 CLI & Docs 03:05 Creating Component 05:28 Rendering Component 07:39 Testing Basics 10:40 Next Video Preview 📌 This course is for: • Developers new to Angular • Developers upgrading from older Angular versions 💬 If your component doesn’t render or tests don’t pass, first compare your code with the source code from Github, and if it still doesn't work, leave a comment with your error message, we’ll try to help you. 🔔 Subscribe to follow the full Modern Angular course. #ModernAngular #AngularCourse

In this video, we set up a **Modern Angular development environment** using the recommended tools and defaults. This is Part 2 of the Modern Angular course, where we move from concepts to hands-on development. In this video, you’ll learn: • How to install Node the right way (nvm / Chocolatey) • How to install and use the Angular CLI • How to create a modern Angular project • What the default project structure looks like today • How modern testing is set up out of the box 📦 Source code repository: https://github.com/loiane/modern-angular 🎥 Full Modern Angular course playlist: https://www.youtube.com/playlist?list=PLGxZ4Rq3BOBqJfR254ZMuBfFRMeyr162U ⏱️ Chapters 00:00 Getting Started 02:26 Node.js Setup 03:31 Angular CLI Install 05:00 Creating Project 07:19 Project Overview 12:09 Running Locally 13:19 Next Steps This course focuses on **Modern Angular**, including: ✔ Standalone components ✔ Signals-first patterns ✔ Built-in control flow ✔ Modern tooling and testing ✔ Real-world application structure 📌 If you’re new to Angular, upgrading from an older version, or coming from React or Vue — this setup will save you time and avoid common issues. 👉 Next video: Your first standalone Angular component. 🔔 Subscribe to follow the full Modern Angular course. #ModernAngular #AngularCourse