Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

CodeSignal

Implementing the Recipe Detail View in Angular

via CodeSignal

Go to class Write review

Overview

Develop a detailed recipe page to display ingredients, steps, and average ratings for any selected recipe.

Syllabus

  • Unit 1: Recipe Detail View
    • Adding Recipe Route to Angular App
    • Building the Recipe Loading State Display
    • Displaying Recipe Details in Angular Template
    • Displaying Recipe Ingredients with Angular Loop
    • Displaying Recipe Steps with Angular Loop
  • Unit 2: Displaying Recipe Details
    • Injecting Services into Recipe Component
    • Loading Recipe Data from URL Parameters
    • Fetching Recipe Data from Backend API
    • Creating a Recipe Rating Display Getter
  • Unit 3: Styling Recipe Detail Pages
    • Adding Padding to Recipe Container
    • Styling the Recipe Title Header
    • Styling the Recipe Rating Text
    • Styling Recipe Ingredient and Step Lists
    • Spacing Individual List Items Properly
    • Aligning Actions Section to Right
    • Styling the Start Cooking Button
    • Styling Error Messages for Recipe Pages

Reviews

Start your review of Implementing the Recipe Detail View in Angular

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.