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

Communication Between Components in Angular

Now that we have two components — TaskComponent and TaskListComponent — it's time to connect them. One will display a single task, and the other will manage and display the entire list of tasks.

How Are They Connected?

The TaskListComponent will manage an array of tasks, where each task is an object with id, title, and completed fields. To display each task, we'll use the TaskComponent.

Additionally, TaskComponent will communicate with its parent component about user actions, such as when a task should be deleted or marked as complete. This interaction will happen through event emission.

Implementing the TaskListComponent Logic

Let's create a component that will be responsible for managing the task list. Inside it, we'll define an array of tasks and also add two methods — deleteTask() and toggleStatus() — to handle task management.

task-list


              123456789101112131415161718192021222324
            
import { TaskComponent } from '../task/task.component';

@Component({
  selector: 'app-task-list-component',
  imports: [TaskComponent],
  templateUrl: './task-list-component.component.html',
  styleUrls: ['./task-list-component.component.css']
})
export class TaskListComponent {
  tasks = [
    { id: 1, title: 'Buy groceries', completed: false },
    { id: 2, title: 'Walk the dog', completed: true },
    { id: 3, title: 'Learn Angular', completed: false }
  ];

  deleteTask(id: number) {
    this.tasks = this.tasks.filter(task => task.id !== id);
  }

  toggleStatus(id: number) {
    const task = this.tasks.find(t => t.id === id);
    if (task) task.completed = !task.completed;
  }
}

The list of tasks (tasks) is managed inside the component, making TaskListComponent the central controller;
The deleteTask() method filters out the task by its id;
The toggleStatus() method finds the task by id and toggles its completed status.

This code uses the *ngFor directive to loop through the tasks array and create a TaskComponent for each task. We'll take a closer look at how *ngFor works in the next section.

[task]="task" — passes the current task to the child component so it can display it;
(onDelete)="deleteTask($event)" — listens for the onDelete event from the child and calls deleteTask() to remove the task;
(onToggle)="toggleStatus($event)" — listens for the onToggle event and calls toggleStatus() to change the task's status.

Decorators: @Input() and @Output()

Now it's time to connect the TaskComponent with the TaskListComponent, and for that, we'll use the decorators @Input() and @Output().

In Angular, the @Input() and @Output() decorators are key tools for communication between components. They allow you to pass data into a component and emit events out of a component. Here's a quick overview:

Here's an example of how they work in the TaskComponent:

task


              123456789101112131415161718192021
            
import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-task',
  imports: [],
  templateUrl: './task.component.html',
  styleUrl: './task.component.css'
})
export class TaskComponent {
  @Input() task: any; // Receives task data from the parent
  @Output() onDelete = new EventEmitter<number>(); // Emits a delete event
  @Output() onToggle = new EventEmitter<number>(); // Emits a toggle event

  deleteTask() {
    this.onDelete.emit(this.task.id); // Emit the task id for deletion
  }

  toggleTask() {
    this.onToggle.emit(this.task.id); // Emit the task id for status change
  }
}

In our case, task is the object passed from the parent TaskListComponent into the TaskComponent.

When the user either deletes a task or toggles its status, the TaskComponent emits events that the parent component listens for.

@Output() and EventEmitter are used to notify the parent component when something happens in the child. These decorators allow the child component to communicate actions like task deletions or status changes to the parent.

The deleteTask() method is called when the user wants to delete a task. It emits the task's id, enabling the parent to remove the task from its list.

The toggleTask() method toggles the task's completed status and informs the parent component about this change.

How it all works together

TaskListComponent passes a task to TaskComponent using @Input();
The user interacts with the task (like clicking "Delete");
TaskComponent emits an event (onDelete or onToggle) with the task's id;
TaskListComponent catches the event and updates the task list;
Angular automatically refreshes the UI based on the updated data.

This way, @Input() and @Output() enable clean, efficient communication between components, keeping the structure organized and reactive.

1. What does the `@Input()` decorator do in Angular?

2. What is the purpose of `EventEmitter` in Angular?

3. In `TaskComponent`, what does the `@Output()` decorator do?

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 6

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

Communication Between Components in Angular

How Are They Connected?

The TaskListComponent will manage an array of tasks, where each task is an object with id, title, and completed fields. To display each task, we'll use the TaskComponent.

Implementing the TaskListComponent Logic

task-list


              123456789101112131415161718192021222324
            
import { TaskComponent } from '../task/task.component';

@Component({
  selector: 'app-task-list-component',
  imports: [TaskComponent],
  templateUrl: './task-list-component.component.html',
  styleUrls: ['./task-list-component.component.css']
})
export class TaskListComponent {
  tasks = [
    { id: 1, title: 'Buy groceries', completed: false },
    { id: 2, title: 'Walk the dog', completed: true },
    { id: 3, title: 'Learn Angular', completed: false }
  ];

  deleteTask(id: number) {
    this.tasks = this.tasks.filter(task => task.id !== id);
  }

  toggleStatus(id: number) {
    const task = this.tasks.find(t => t.id === id);
    if (task) task.completed = !task.completed;
  }
}

The list of tasks (tasks) is managed inside the component, making TaskListComponent the central controller;
The deleteTask() method filters out the task by its id;
The toggleStatus() method finds the task by id and toggles its completed status.

This code uses the *ngFor directive to loop through the tasks array and create a TaskComponent for each task. We'll take a closer look at how *ngFor works in the next section.

[task]="task" — passes the current task to the child component so it can display it;
(onDelete)="deleteTask($event)" — listens for the onDelete event from the child and calls deleteTask() to remove the task;
(onToggle)="toggleStatus($event)" — listens for the onToggle event and calls toggleStatus() to change the task's status.

Decorators: @Input() and @Output()

Now it's time to connect the TaskComponent with the TaskListComponent, and for that, we'll use the decorators @Input() and @Output().

Here's an example of how they work in the TaskComponent:

task


              123456789101112131415161718192021
            
import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-task',
  imports: [],
  templateUrl: './task.component.html',
  styleUrl: './task.component.css'
})
export class TaskComponent {
  @Input() task: any; // Receives task data from the parent
  @Output() onDelete = new EventEmitter<number>(); // Emits a delete event
  @Output() onToggle = new EventEmitter<number>(); // Emits a toggle event

  deleteTask() {
    this.onDelete.emit(this.task.id); // Emit the task id for deletion
  }

  toggleTask() {
    this.onToggle.emit(this.task.id); // Emit the task id for status change
  }
}

In our case, task is the object passed from the parent TaskListComponent into the TaskComponent.

When the user either deletes a task or toggles its status, the TaskComponent emits events that the parent component listens for.

The deleteTask() method is called when the user wants to delete a task. It emits the task's id, enabling the parent to remove the task from its list.

The toggleTask() method toggles the task's completed status and informs the parent component about this change.

How it all works together

TaskListComponent passes a task to TaskComponent using @Input();
The user interacts with the task (like clicking "Delete");
TaskComponent emits an event (onDelete or onToggle) with the task's id;
TaskListComponent catches the event and updates the task list;
Angular automatically refreshes the UI based on the updated data.

This way, @Input() and @Output() enable clean, efficient communication between components, keeping the structure organized and reactive.

1. What does the `@Input()` decorator do in Angular?

2. What is the purpose of `EventEmitter` in Angular?

3. In `TaskComponent`, what does the `@Output()` decorator do?

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 6

Introduction to Angular

Communication Between Components in Angular

How Are They Connected?

Implementing the TaskListComponent Logic

Decorators: @Input() and @Output()

How it all works together

1. What does the @Input() decorator do in Angular?

2. What is the purpose of EventEmitter in Angular?

3. In TaskComponent, what does the @Output() decorator do?

Introduction to Angular

Communication Between Components in Angular

How Are They Connected?

Implementing the TaskListComponent Logic

Decorators: @Input() and @Output()

How it all works together

1. What does the @Input() decorator do in Angular?

2. What is the purpose of EventEmitter in Angular?

3. In TaskComponent, what does the @Output() decorator do?

1. What does the `@Input()` decorator do in Angular?

2. What is the purpose of `EventEmitter` in Angular?

3. In `TaskComponent`, what does the `@Output()` decorator do?

1. What does the `@Input()` decorator do in Angular?

2. What is the purpose of `EventEmitter` in Angular?

3. In `TaskComponent`, what does the `@Output()` decorator do?