Welcome! This interactive tutor is designed to guide you step-by-step through building a complete, modern Angular application from the ground up. You'll learn the latest patterns and best practices for Angular v20 by building a real, tangible project: a "Smart Recipe Box" for creating and managing recipes.

Our goal is to foster critical thinking and help you retain what you learn. Instead of just giving you code, we'll explain concepts, show you examples, and then give you project-specific exercises to solve on your own.

Click the link below to launch the AI tutor in Firebase Studio.

Ready to begin? Once you've launched the tutor in Firebase Studio, type anything in the chat panel (like "Hello" or "Let's start") to wake up the tutor.

For each new topic, you'll follow a simple and effective learning loop that emphasizes critical thinking to help you better retain what you learn.

1. Learn the Concept: We'll briefly explain a core Angular feature and show you a generic code example to illustrate it.
2. Apply Your Knowledge: You'll immediately get a hands-on exercise. The tutor presents these exercises at a high level with objectives and expected outcomes, encouraging you to think through the solution yourself.
3. Get Feedback & Support: When you're ready, let the tutor know. It will automatically read your project files to verify your solution is correct. If you get stuck, you are in complete control! You can ask for a "hint" for more guidance, or get step-by-step instructions by typing "detailed guide" or "step-by-step instructions."

Once you've succeeded, we'll move directly to the next topic. You can also ask the tutor for more information on a topic or ask any related Angular questions at any time.

You are in control of your learning experience. Use these features at any time:

Feel free to take a break! Your progress is tied to your project's code. When you return for a new session, the tutor will automatically analyze your files to determine exactly where you left off, allowing you to seamlessly pick up right where you were.

Pro Tip: We highly recommend using Git to save your progress. After completing a module, it's a great idea to commit your changes (e.g., git commit -m "Complete Phase 1, Module 8"). This acts as a personal checkpoint you can always return to.

You can set your experience level to Beginner (1-3), Intermediate (4-7), or Experienced (8-10). You can change this setting at any time during your session, and the tutor will immediately adapt its teaching style to match.

Example Prompts:

• "Set my experience level to beginner."
• "Change my rating to 8."

Want to see the big picture or check how far you've come? Just ask for the table of contents.

Example Prompts:

• "Where are we?"
• "Show the table of contents."
• "Show the plan."

The tutor will display the full learning plan and mark your current location.

The tutor will apply basic styling to your application to keep things looking clean. You are highly encouraged to apply your own styling to make the app your own!

If you'd rather move on to the next topic in the learning path, you can ask the tutor to skip the current exercise.

Example Prompts:

• "Skip this section."
• "Auto-complete this step for me."

The tutor will ask for confirmation and then present you with the complete code solution for the current module and attempt to automatically apply any required updates to ensure you can continue smoothly with the next module.

If you want to learn about a specific topic out of order (e.g., jump from the basics to forms), you can! The tutor will provide the necessary code to update your project to the correct starting point for the selected module and attempt to automatically apply any required updates.

Example Prompts:

• "Take me to the forms lesson."
• "I want to learn about Route Guards now."
• "Jump to the section on Services."

If the tutor doesn't respond correctly or you suspect something is wrong, here are a few things to try:

1. Type "proceed": This can often nudge the tutor to continue to the next step.
2. Correct the Tutor: If the tutor is mistaken about your progress (e.g., it says you're on Module 3 but you've completed Module 8), just tell it! For example: "I'm actually on Module 8." The tutor will re-evaluate your code and adjust.
3. Verify Your UI: If you want to confirm what your application's user interface should look like, just ask the tutor. For example: "What should I see in my UI?"
4. Reload the Browser Window: A simple refresh can solve many issues.
5. Hard Restart the Browser: Errors are sometimes only surfaced in the browser's developer console. A hard restart can help clear underlying issues.
6. Start a New Chat: You can always start a new chat to remove the existing history and begin fresh. The tutor will read your files to find the latest step you were on.

You will build your application over a four-phase journey. You can follow this path from start to finish to create a complete, fully-functional Angular application. Each module builds logically upon the last, taking you from the basics to advanced, real-world features.

A Note on Automated Setup: Some modules require a setup step, like creating interfaces or mock data. In these cases, the tutor will present you with the code and file instructions. You will be responsible for creating and modifying these files as instructed before the exercise begins.

• Module 1: Getting Started
• Module 2: Dynamic Text with Interpolation
• Module 3: Event Listeners ((click))

• Module 4: State Management with Writable Signals (Part 1: set)
• Module 5: State Management with Writable Signals (Part 2: update)
• Module 6: Computed Signals

• Module 7: Template Binding (Properties & Attributes)
• Module 8: Creating & Nesting Components
• Module 9: Component Inputs with Signals
• Module 10: Styling Components
• Module 11: List Rendering with @for
• Module 12: Conditional Rendering with @if

• Module 13: Two-Way Binding
• Module 14: Services & Dependency Injection (DI)
• Module 15: Basic Routing
• Module 16: Introduction to Forms
• Module 17: Intro to Angular Material

This tutor is powered by a Large Language Model (LLM). While we've worked hard to make it an expert, AIs can make mistakes. If you encounter an explanation or code example that seems incorrect, please let us know! You can correct the tutor, and it will use your feedback to adjust its response.

For any technical bugs or feature requests, please file an issue on our GitHub repository: https://github.com/angular/ai-tutor/issues. Your feedback is invaluable in making this tool better for everyone.