Learning Process

Course Structure

The course is divided into several chapters, each focusing on a specific application feature. The course is feature-driven rather than technology-driven: Angular features will be introduced when needed in the context of a new feature in the application.

It keeps you focus at learning something you can use right away, with a real application.

---

Chapters

Display a list

Learn how to build the foundation of your application by creating a task list. You’ll create a component to display tasks, use Angular control flow to render lists dynamically, and apply styling for a clean UI.

Handle forms and navigation

Create a form component for adding new tasks. Use the Angular CLI to generate components, build and style forms, and collect user input with Angular’s form handling. Navigation is introduced to enable switching the content on screen.

Use forms to update existing data

Adapt a form for editing tasks, pre-fill form fields with existing data, handle validation, and use Angular’s routing and lifecycle hooks to update task information.

Consolidate your knowledge

Add delete functionality to your task list. Implement a delete button, connect your UI to Angular services, and manage state as users remove tasks.

Create reusable components

Create reusable components for your application. Use Angular’s component architecture to build reusable UI elements, and learn about component communication with a parent-child relationship.

Communicate with an API

Integrate your Angular app with an external API using HttpClient. Retrieve, create, update, and delete tasks from a backend server, and learn about observables and the async pipe.

---

Lessons

Each chapter is divided into several lessons. Each lesson is a small action to accomplish. Each lesson is introduced with a learning objective and a description of the expected outcome.

Chapter Key Objectives

Chapter Objectives

• Understand the learning process

  Learn how to effectively learn Angular through this course.

• Follow the step-by-step approach

  Understand how to follow the course structure and complete each step.

• Practice with hands-on exercises

  Learn by doing with practical exercises and real-world examples.

Instructions

After a brief explanation of the technical aspects, a lesson will provide you with a set of instructions to update the code, for example:

1. Create the Task model in the src/app/models folder.

   src/app/models/task.model.ts

   export class Task {
     id: number;
     title: string;
     description: string;
     completed: boolean;
   }

2. Create a new component named TaskFormComponent.

Terminal

Some lessons will ask you to run commands in the terminal.

In Visual Studio Code, you can open a terminal by clicking on the Terminal menu and selecting New Terminal.

Code Snippets

Most lessons contain code snippets as examples to help you accomplish the action. The course content uses a specific style to highlight code changes, for example:

task-form.html

<form>
  <label for="title" class="form-label">Title:</label>
  <input
    type="text"
    id="title"
    name="title"
    class="form-control"
    [(ngModel)]="task.title"
  />

  <button type="submit" class="btn btn-primary" (click)="createTask()">
    Create Task
  </button>
</form>