Welcome back! In the last lesson, you built the main template for your Cooking Helper landing page using Angular. You set up sections for searching recipes, displaying results, showing popular recipes, and a random recipe feature — all using Angular’s component and template system.

In this lesson, you will learn how to use TypeScript within your Angular component to make your landing page interactive. By the end, you will be able to:

• Capture user input from the search form and display matching recipes
• Automatically show popular recipes when the page loads
• Add a “Surprise Me” button that fetches a random recipe
• Handle errors and give helpful feedback to users

Let’s get started and bring your Cooking Helper to life with Angular!

Before we dive in, let’s quickly review how Angular connects your TypeScript logic to your HTML template. In Angular, each component consists of:

• A TypeScript file (e.g., home.component.ts) that contains the logic and data for your page
• An HTML template (e.g., home.component.html) that defines the structure and layout
• Optionally, a CSS file for styling

Angular automatically links your component’s TypeScript class to its template. Any properties or methods you define in the TypeScript file can be used in the template using Angular’s binding syntax. There’s no need for <script> tags or manual DOM manipulation.

This is the current file structure:

Now, let’s see how we can use Angular and TypeScript to make your page interactive.

The first feature we’ll add is searching for recipes by ingredients. We want users to type ingredients into a form, submit it, and see matching recipes.

Inside the onSearch() method in your TypeScript file, you can access the user’s input directly from the form control:

• event?.preventDefault() stops the page from refreshing when submitting the form.
• this.searchControl.value.trim() gets the text from the input and removes extra spaces.
• The string is split by commas, each ingredient is trimmed, and empty items are filtered out.

To send the search request, use an Angular service (e.g., ApiService) that wraps HTTP requests. Here’s how you might call the service from your component:

• this.api.searchRecipes(ingredients) sends the request to the backend.
• The results are stored in this.searchResults for display.
• Errors are handled by setting this.searchError.

You don't need to modify anything to show the results, as in previous units you used @for and @if with the correct variables in the component template Angular will take care of it.

Next, let’s show popular recipes as soon as the page loads.

In your component’s TypeScript file, create a method to load popular recipes using your service:

To load popular recipes when the page loads, call loadPopularRecipes() in the component’s constructor or ngOnInit:

Now, let’s add a “Surprise Me” button that shows a random recipe.

In your TypeScript file, implement the method to fetch a random recipe:

• The random recipe is displayed in the template when available.
• Errors are shown if the request fails.

Example Output:

It’s important to let users know if something goes wrong or if there are no results. In Angular, you can use component properties and template bindings to show helpful messages:

• When searching, if no recipes are found, show:
  No matching recipes found.
• If there’s a problem loading popular recipes, show:
  Error loading popular recipes.
• If fetching a random recipe fails, show:
  Error fetching random recipe.

These messages are displayed using @if in your template, based on the error properties in your component.

In this lesson, you learned how to use Angular and TypeScript to make your Cooking Helper landing page interactive. You can now:

• Handle recipe searches by ingredients and show results using Angular forms and template bindings
• Display popular recipes automatically when the page loads using Angular’s lifecycle hooks
• Add a “Surprise Me” button for random recipes using Angular’s event bindings
• Show helpful messages when things go wrong using component properties and template logic

Next, you’ll get to practice these skills with hands-on exercises. You’ll write and test your own Angular code to reinforce what you’ve learned. Great job so far — let’s keep going!