Course Content

Introduction to Angular

1. Angular Fundamentals

What is Angular?The Evolution and Stability of Angular Key Principles of the Framework Setting Up the Environment Getting Started with Angular CLI Angular Project Structure

2. Components and Templates

What Is a Component?The Main Component in Angular Creating a Component Types of Data Binding in Angular Component and Template Interaction in Angular Communication Between Components in Angular

3. Mastering Angular Directives and Pipes

Introduction to Directives in Angular Structural Directives in Angular Attribute Directives in Angular Creating Custom Directives in Angular Introduction to Pipes Creating a Custom Pipe in Angular

4. Services and Dependency Injection in Angular

Introduction to Angular Services Creating a Custom Service in Angular Service Injection into a Component Adding Functionality to Our Application Saving Data to Local Storage in Angular

5. Standalone Components & Modules

Introduction to Modules in Angular Modular Architecture in Angular Transition to Standalone Components How Standalone Components Work in Angular

6. Routing and Navigation in Angular

Routing Basics in Angular Implementing the TaskDetailsComponent Setting Up Routing in Angular Component Communication and Navigation Handling Non-Existent Routes in Angular

Implementing the TaskDetailsComponent

On the main page of our app, the user sees a list of all tasks. This makes it easy to quickly get an overview of what needs to be done.

But what if the user wants to see the details of a specific task — its unique ID, exact title, and status? For that, we need to create a separate task details page.

This chapter will show you how to build the TaskDetailsComponent, which opens when the user navigates to a specific URL and displays information about a particular task.

Creating a New Component

To display task details, we'll create a standalone component. It will be independent and can be connected directly in the routing configuration.

Run this command:

This will create the file task-details.component.ts along with its template, styles, and tests. You can safely delete the test file if you want.

Implementing the Component

At this stage, we only need the task's id, title, and status — this is all the information we have about a task. So in the component, we'll just add a task property.

component


              1234567891011121314
            
import { Component } from '@angular/core';
import { Task } from '../../services/task.service';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-task-details',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './task-details.component.html',
  styleUrls: ['./task-details.component.css']
})
export class TaskDetailsComponent {
  task: Task | undefined;
}

Note

Don't forget to import CommonModule in the component, as we'll need it in the template.

Now let's create the template and its CSS styles:

component


              1234567891011
            
<div *ngIf="task; else notFound" class="task-details-card">
  <h2>Task Details</h2>
  <p><strong>ID:</strong> {{ task.id }}</p>
  <p><strong>Title:</strong> {{ task.title }}</p>
  <p><strong>Status:</strong> {{ task.completed ? 'Completed' : 'Incomplete' }}</p>
  <button (click)="goToHomePage()">← Back to tasks</button>
</div>

<ng-template #notFound>
  <p>Task not found.</p>
</ng-template>

The template uses the *ngIf directive to display the task details card if the task exists; otherwise, it shows a "Task not found" message using ng-template.

Inside the card, it shows the ID, title, and status of the task, plus a button to go back to the main task list (we'll add the button's functionality later).

Now our TaskDetailsComponent is ready to use. We'll connect it to our routing in the next chapter.

Everything was clear?

Thanks for your feedback!

Section 6. Chapter 2

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Course Content

Introduction to Angular

1. Angular Fundamentals

What is Angular?The Evolution and Stability of Angular Key Principles of the Framework Setting Up the Environment Getting Started with Angular CLI Angular Project Structure

2. Components and Templates

What Is a Component?The Main Component in Angular Creating a Component Types of Data Binding in Angular Component and Template Interaction in Angular Communication Between Components in Angular

3. Mastering Angular Directives and Pipes

Introduction to Directives in Angular Structural Directives in Angular Attribute Directives in Angular Creating Custom Directives in Angular Introduction to Pipes Creating a Custom Pipe in Angular

4. Services and Dependency Injection in Angular

Introduction to Angular Services Creating a Custom Service in Angular Service Injection into a Component Adding Functionality to Our Application Saving Data to Local Storage in Angular

5. Standalone Components & Modules

Introduction to Modules in Angular Modular Architecture in Angular Transition to Standalone Components How Standalone Components Work in Angular

6. Routing and Navigation in Angular

Routing Basics in Angular Implementing the TaskDetailsComponent Setting Up Routing in Angular Component Communication and Navigation Handling Non-Existent Routes in Angular

Implementing the TaskDetailsComponent

On the main page of our app, the user sees a list of all tasks. This makes it easy to quickly get an overview of what needs to be done.

But what if the user wants to see the details of a specific task — its unique ID, exact title, and status? For that, we need to create a separate task details page.

This chapter will show you how to build the TaskDetailsComponent, which opens when the user navigates to a specific URL and displays information about a particular task.

Creating a New Component

To display task details, we'll create a standalone component. It will be independent and can be connected directly in the routing configuration.

Run this command:

This will create the file task-details.component.ts along with its template, styles, and tests. You can safely delete the test file if you want.

Implementing the Component

At this stage, we only need the task's id, title, and status — this is all the information we have about a task. So in the component, we'll just add a task property.

component


              1234567891011121314
            
import { Component } from '@angular/core';
import { Task } from '../../services/task.service';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-task-details',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './task-details.component.html',
  styleUrls: ['./task-details.component.css']
})
export class TaskDetailsComponent {
  task: Task | undefined;
}

Note

Don't forget to import CommonModule in the component, as we'll need it in the template.

Now let's create the template and its CSS styles:

component


              1234567891011
            
<div *ngIf="task; else notFound" class="task-details-card">
  <h2>Task Details</h2>
  <p><strong>ID:</strong> {{ task.id }}</p>
  <p><strong>Title:</strong> {{ task.title }}</p>
  <p><strong>Status:</strong> {{ task.completed ? 'Completed' : 'Incomplete' }}</p>
  <button (click)="goToHomePage()">← Back to tasks</button>
</div>

<ng-template #notFound>
  <p>Task not found.</p>
</ng-template>

The template uses the *ngIf directive to display the task details card if the task exists; otherwise, it shows a "Task not found" message using ng-template.

Inside the card, it shows the ID, title, and status of the task, plus a button to go back to the main task list (we'll add the button's functionality later).

Now our TaskDetailsComponent is ready to use. We'll connect it to our routing in the next chapter.

Everything was clear?

Thanks for your feedback!

Section 6. Chapter 2