Introduction: Welcome to the Landing Page

Welcome back! So far, you connected the Angular frontend with the backend. In this lesson, we will focus on creating the template for the landing page of our Cooking Helper app. The landing page is the first thing users see when they visit your site. It should be clear, inviting, and easy to use.

By the end of this lesson, you will know how to build a well-structured Angular component template for the landing page. This will set the foundation for adding more features and interactivity in later lessons. Let’s get started!

Recall: Key HTML and Angular Template Concepts

Before we dive in, let’s quickly remind ourselves of a few important concepts:

  • HTML Structure: HTML is the language used to create web pages. It uses tags like <html>, <head>, and <body> to organize content.
  • Angular Components: In Angular, the UI is built using components. Each component has its own HTML template, TypeScript class, and optional CSS for styling.
  • Component Templates: Angular templates use regular HTML but also support special syntax for data binding, event handling, and conditionally displaying content.
  • Routing: Angular uses a router to map URLs to components. For example, the home page is usually mapped to a HomeComponent.
  • Data Binding: Angular lets you bind data from your component class to the template using curly braces ({{ }}) and bind events using parentheses (e.g., (click)).

If any of these ideas are new to you, don’t worry! We’ll see them in action as we build the landing page.

Breaking Down the Landing Page Structure

Let’s look at what our landing page needs. We want users to be able to:

  • Search for recipes by entering ingredients.
  • See the results of their search.
  • View a list of popular recipes.
  • Get a random recipe if they’re feeling adventurous.

To make this possible, our landing page will have four main sections:

  1. Search Section: A form where users can type in ingredients.
  2. Search Results Section: A place to show recipes that match the search.
  3. Popular Recipes Section: A list of recipes that are popular right now.
  4. Random Recipe Section: A button to get a random recipe and a spot to display it.

We will use this file structure

By organizing the page this way, we make it easy for users to find what they need and explore new ideas.

Step-by-Step: Structuring the Landing Page in Angular

Let’s build the landing page step by step. We’ll use Angular’s component system and break the code into small, easy-to-understand pieces.

1. Adding the Search Section

Let’s add the search form using Angular’s template syntax and form controls.

  • The form uses Angular’s FormControl for managing input.
  • The (ngSubmit) event calls the onSearch() method in the component.
  • The button is disabled while searching.
  • If there is a value in the variable searchError, we display it.
2. Adding the Search Results Section

We use Angular’s structural directives to show or hide the results and to display the list of recipes.

  • @if and @for are Angular’s template syntax for conditionals and loops.
  • The results are only shown after a search.
3. Adding the Popular Recipes Section

We use Angular’s data binding and directives to load and display popular recipes.

  • The list updates automatically as data is loaded.
4. Adding the Random Recipe Section

We use Angular’s event binding and data binding for interactivity and data display.

  • The button triggers a method in the component to fetch a random recipe.
  • The result is displayed using data binding.
5. The HomeComponent TypeScript Class

Here’s the basic structure of the component class that supports the template:

  • The component manages the state for the search, popular recipes, and random recipe sections.
  • Methods like onSearch() and fetchRandomRecipe() will be implemented in later units to handle user actions.
Summary and What’s Next

In this lesson, you learned how to build the landing page for the Cooking Helper app using Angular components and templates. We broke the page into clear sections: a search form, search results, popular recipes, and a random recipe feature.

Now that you have a solid landing page structure, you’re ready to practice these concepts in the upcoming exercises. You’ll get hands-on experience creating and editing Angular components, and soon you’ll see how to connect your app to real data and add even more interactivity. Great job getting started!

Previous
Next
Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal