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

Component and Template Interaction in Angular

In the previous chapter, we already got familiar with the basic types of data binding. Now, let's take a look at how they are applied in practice when working with the TaskComponent.

Task Structure

Our task component will display the task title, as well as two buttons: one for changing the task status (from "Complete" to "Undo"), and the other for deleting the task. Here's the HTML structure that will be used:

template

style


              123456789101112131415161718
            
<div class="task">
  <!-- Task title -->
  <div class="task-title">
    <!-- The task title will be displayed here -->
  </div>

  <div class="task-actions">
    <!-- Button for completing or undoing the task -->
    <button class="complete">
      <!-- The button text will depend on the task's status -->
    </button>

    <!-- Button for deleting the task -->
    <button class="delete">
      Delete
    </button>
  </div>
</div>

The styles have already been defined. You can review them by switching to the file style.css.

Component Implementation

Our component will work with a task object, which will store information about the task, such as its id, title, and completed status. We will define this object within the component class:


python

We can display this data in the component's HTML template.

Using Component Data in the Template

To display data from the task object, we simply reference its properties directly in the template. For example, to display the task title:


python

If the task is completed, the button text should change. We can use a ternary operator to adjust the button text based on the value of task.completed.


python

If task.completed is true, the button text will show "Undo", otherwise, it will show "Complete". This way, the button text dynamically adapts to the current state of the task.

Adding Dynamic Classes with Property Binding

Now, let's add the ability to change the appearance of the task based on its state. We'll use property binding to conditionally apply a CSS class:


python

This means: if task.completed is true, the completed class will be added to the element. Otherwise, the class won't be applied.

As a result, when the task is completed, the visual appearance will change: the text will be crossed out, the color will turn gray, and the background will be light gray. All of these styles are defined in the .completed CSS class, which I've outlined above.

Binding Events to Buttons

Now let's bind events to the buttons so that the appropriate actions are executed when the buttons are clicked. We have two buttons:

The "Complete" / "Undo" button — when clicked, it will toggle the task's completion status;
The "Delete" button — when clicked, it will delete the task.

To do this, we'll create two methods in the TaskComponent:


python

The deleteTask() method will remain empty for now since we don't yet have a task list to remove items from;
The toggleTask() method simply toggles the value of task.completed. If the task is marked as complete (true), it will be marked incomplete (false), and vice versa.

Now, to make these methods work when the buttons are clicked, we need to bind them to button click events. We'll use Event Binding with the click event to listen for clicks on the buttons and call the corresponding methods.

template


              1234567891011121314151617
            
<div class="task" [class.completed]="task.completed">
  <!-- Task title -->
  <div class="task-title">{{ task.title }}</div>

  <div class="task-actions">
    <!-- Button for completing or undoing the task -->
    <button class="complete" (click)="toggleTask()">
      <!-- Button text depends on the task's status -->
      {{ task.completed ? 'Undo' : 'Complete' }}
    </button>

    <!-- Button for deleting the task -->
    <button class="delete" (click)="deleteTask()">
      Delete
    </button>
  </div>
</div>

In this example, event binding allows us to link user actions to component methods. The "Complete / Undo" button calls the toggleTask() method, which toggles the task.completed state. This also changes the button text from "Complete" to "Undo" based on the task's status.

The "Delete" button calls the deleteTask() method, which is currently not implemented, as task deletion will be added later.

Now, we have fully implemented the template for our simple task component. Here's what the component looks like:

task


              12345678910111213141516171819202122
            
import { Component } from '@angular/core';

@Component({
  selector: 'task-component',
  imports: [],
  templateUrl: './task-component.component.html',
  styleUrls: ['./task-component.component.css']
})
export class TaskComponent {
  
  task = { 
    id: 1, 
    title: 'Buy groceries', 
    completed: false 
  };

  deleteTask() {}

  toggleTask() {
    this.task.completed = !this.task.completed;
  }
}

The component provides the data, and the template provides the visual representation. Together, they create an interactive and user-friendly task interface, where data is displayed, the appearance changes, and the buttons adapt to the task's state.

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 5

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

Component and Template Interaction in Angular

In the previous chapter, we already got familiar with the basic types of data binding. Now, let's take a look at how they are applied in practice when working with the TaskComponent.

Task Structure

template

style


              123456789101112131415161718
            
<div class="task">
  <!-- Task title -->
  <div class="task-title">
    <!-- The task title will be displayed here -->
  </div>

  <div class="task-actions">
    <!-- Button for completing or undoing the task -->
    <button class="complete">
      <!-- The button text will depend on the task's status -->
    </button>

    <!-- Button for deleting the task -->
    <button class="delete">
      Delete
    </button>
  </div>
</div>

The styles have already been defined. You can review them by switching to the file style.css.

Component Implementation

Our component will work with a task object, which will store information about the task, such as its id, title, and completed status. We will define this object within the component class:


python

We can display this data in the component's HTML template.

Using Component Data in the Template

To display data from the task object, we simply reference its properties directly in the template. For example, to display the task title:


python

If the task is completed, the button text should change. We can use a ternary operator to adjust the button text based on the value of task.completed.


python

If task.completed is true, the button text will show "Undo", otherwise, it will show "Complete". This way, the button text dynamically adapts to the current state of the task.

Adding Dynamic Classes with Property Binding

Now, let's add the ability to change the appearance of the task based on its state. We'll use property binding to conditionally apply a CSS class:


python

This means: if task.completed is true, the completed class will be added to the element. Otherwise, the class won't be applied.

Binding Events to Buttons

Now let's bind events to the buttons so that the appropriate actions are executed when the buttons are clicked. We have two buttons:

The "Complete" / "Undo" button — when clicked, it will toggle the task's completion status;
The "Delete" button — when clicked, it will delete the task.

To do this, we'll create two methods in the TaskComponent:


python

The deleteTask() method will remain empty for now since we don't yet have a task list to remove items from;
The toggleTask() method simply toggles the value of task.completed. If the task is marked as complete (true), it will be marked incomplete (false), and vice versa.

template


              1234567891011121314151617
            
<div class="task" [class.completed]="task.completed">
  <!-- Task title -->
  <div class="task-title">{{ task.title }}</div>

  <div class="task-actions">
    <!-- Button for completing or undoing the task -->
    <button class="complete" (click)="toggleTask()">
      <!-- Button text depends on the task's status -->
      {{ task.completed ? 'Undo' : 'Complete' }}
    </button>

    <!-- Button for deleting the task -->
    <button class="delete" (click)="deleteTask()">
      Delete
    </button>
  </div>
</div>

The "Delete" button calls the deleteTask() method, which is currently not implemented, as task deletion will be added later.

Now, we have fully implemented the template for our simple task component. Here's what the component looks like:

task


              12345678910111213141516171819202122
            
import { Component } from '@angular/core';

@Component({
  selector: 'task-component',
  imports: [],
  templateUrl: './task-component.component.html',
  styleUrls: ['./task-component.component.css']
})
export class TaskComponent {
  
  task = { 
    id: 1, 
    title: 'Buy groceries', 
    completed: false 
  };

  deleteTask() {}

  toggleTask() {
    this.task.completed = !this.task.completed;
  }
}

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 5