Angular - 2.27-Exercise 3

We are at the end of the basics section. Time to practise what we have learned about directives. The exercise asks you to: add a "Show details" button, display a secret paragraph that the button toggles, store every click in a log array, render that log with *ngFor, and from the fifth entry onward give every log item a blue background through ngStyle and white text through ngClass. Pause the video, work through it, then come back to compare.

The solution starts with a button styled in Bootstrap: <button class="btn btn-primary" (click)="onToggleDetails()">Show details</button>. We add a secret paragraph below it: <p *ngIf="showSecret">Secret password = test</p>. In the component class we declare showSecret = false and the toggle handler onToggleDetails() { this.showSecret = !this.showSecret; this.log.push(this.log.length + 1); }.

Log the clicks and style them

  • Declare log: number[] = []; in the class to keep track of clicks.
  • Render the log with <div *ngFor="let logItem of log" [ngStyle]="{ backgroundColor: logItem >= 5 ? 'blue' : 'transparent' }" [ngClass]="{ 'white-text': logItem >= 5 }">{{ logItem }}</div>.
  • Add a CSS rule in the component styles: .white-text { color: white; }.

Click the button several times. The secret paragraph toggles on and off, and the log grows by one number per click. Up to four entries the rows stay neutral; starting with the fifth entry the background becomes blue and the text white, exactly as required. This combination of *ngIf, event binding, *ngFor, ngStyle and ngClass exercises every directive we have studied in this section.

You could of course extract the boolean expression into a class method to keep the template tidy - that is generally a better practice. The next lesson will show a small bonus solution using timestamps and an additional *ngFor feature (the index) that we have not yet covered.

Summary

This lesson introduces Exercise 3, a practical project where students will build a recipe book and shopping list application combining features learned in previous sections. The application features two main sections: a detailed recipe book for managing and viewing recipes, and a shopping list with the ability to add recipe ingredients directly. Before starting development, students will plan the application structure and identify all required components.

Key points

  • Build a recipe book and shopping list application combining Angular features from previous lessons
  • The application includes two main sections: recipe management with detailed views and a shopping list feature
  • Add recipe ingredients directly to the shopping list for integrated functionality
  • Plan the application structure and identify required components before writing code
  • This exercise consolidates multiple features learned earlier in the course into a real-world application

FAQ

What will I build in this Angular exercise?

You will create a recipe book and shopping list application. It includes a recipe book section where you can manage and view recipe details, and a shopping list section where you can manage items and add recipe ingredients directly to your shopping list.

Why is planning important before starting the exercise?

Planning helps you define the application structure and identify all the components you will need. This organized approach makes the development process more efficient and ensures you don't miss required functionality.

What Angular features from previous sections will this exercise use?

This exercise uses many functionalities learned in the previous section of the course, bringing together multiple concepts and features in a practical, real-world application context.