Building the Landing Page

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: Search Section: A form where users can type in ingredients. Search Results Section: A place to show recipes that match the search. Popular Recipes Section: A list of recipes that are popular right now. Random Recipe Section: A button to get a random recipe and a spot to display it. We will use this file structure tree src/ └─ app/ ├─ home/ │ ├─ home.component.ts │ ├─ home.component.html │ └─ home.component.css ├─ models/ │ └─ recipe.model.ts └─ services/ └─ api.service.ts By organizing the page this way, we make it easy for users to find what they need and explore new ideas.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

HTML

<section class="search-section">
  <h1>Find a Recipe</h1>
  <p>Enter ingredients to search for recipes. Separate multiple items with commas.</p>

  <form class="search-form" (submit)="onSearch($event)">
    <input
      type="text"
      id="ingredient-input"
      name="ingredients"
      placeholder="e.g. chicken, rice, garlic"
      [formControl]="searchControl"
      required
    />
    <button type="submit" [disabled]="loadingSearch">
      {{ loadingSearch ? 'Searching...' : 'Search' }}
    </button>
  </form>
  @if (searchError) {
    <p class="error">{{ searchError }}</p>
  }
</section>

HTML

@if (hasSearched) {
  <section class="results-section">
    <h2>Search Results</h2>
    <ul id="results-list">
      @if (!loadingSearch && !searchError && searchResults.length === 0) {
        <li>No matching recipes found.</li>
      }
      @for (recipe of searchResults; track recipe) {
        <li>
          <a [routerLink]="['/recipe', recipe.id]">{{ recipe.name }}</a>
        </li>
      }
    </ul>
  </section>
}

HTML

<section class="popular-section">
  <h2>Popular Recipes</h2>
  <ul id="popular-recipes">
    @if (loadingPopular) {
      <li>Loading popular recipes...</li>
    }
    @if (!loadingPopular && popularError) {
      <li>{{ popularError }}</li>
    }
    @for (recipe of popularRecipes; track recipe) {
      <li>
        <a [routerLink]="['/recipe', recipe.id]">{{ recipe.name }}</a>
        @if (recipe.average_rating) {
          <span class="rating">(⭐ {{ recipe.average_rating }})</span>
        }
      </li>
    }
  </ul>
</section>

HTML

<section class="random-section">
  <h2>Feeling Lucky?</h2>
  <button id="random-recipe-btn" type="button" (click)="fetchRandomRecipe()" [disabled]="loadingRandom">
    {{ loadingRandom ? 'Fetching...' : 'Get a Random Recipe' }}
  </button>
  @if (randomRecipe) {
    <div id="random-recipe" class="random-result">
      <h3>{{ randomRecipe.name }}</h3>
      <p><strong>Ingredients:</strong> {{ randomRecipe.ingredients.join(', ') }}</p>
      <p><a [routerLink]="['/recipe', randomRecipe.id]">View full recipe</a></p>
    </div>
  }
  @if (randomError) {
    <p class="error">{{ randomError }}</p>
  }
</section>

TypeScript

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, DestroyRef, inject, ChangeDetectorRef } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { RouterLink } from '@angular/router';
import { RandomRecipe, RecipeSummary } from '../../models/recipe.model';
import { ApiService } from '../../services/api.service';

@Component({
  selector: 'app-home',
  imports: [CommonModule, ReactiveFormsModule, RouterLink],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HomeComponent {
  private readonly destroyRef = inject(DestroyRef);
  private readonly cdr = inject(ChangeDetectorRef);

  searchControl = new FormControl('', { nonNullable: true });
  searchResults: RecipeSummary[] = [];
  popularRecipes: RecipeSummary[] = [];
  randomRecipe?: RandomRecipe | null;

  hasSearched = false;
  loadingSearch = false;
  loadingPopular = true;
  loadingRandom = false;

  searchError = '';
  popularError = '';
  randomError = '';

  constructor(private readonly api: ApiService) {}
  
  onSearch(event?: Event): void {}
  
  fetchRandomRecipe(): void {}
}

Introduction: Welcome to the Landing Page

Recall: Key HTML and Angular Template Concepts

Breaking Down the Landing Page Structure

Join the 1M+ learners on CodeSignal

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

1. Adding the Search Section

2. Adding the Search Results Section

3. Adding the Popular Recipes Section

4. Adding the Random Recipe Section

5. The HomeComponent TypeScript Class

Summary and What’s Next