Introduction to Build a Modern Angular Application with Signals

Course Introduction

Project Architecture Build a Modern Angular Application with Signals

Project Architecture

This module initiates your journey by highlighting the significance of lightweight dependencies, improved reactivity, and optimized performance in application development using Angular 17. Understand the reasons driving the upgrade from previous Angular versions to Angular 17.

Introduction

Getting started with the concept of signals

The Concept of Signals

The importance of Signals over Change Detection and Zone.js

In this lesson, you will learn how to create our first Signals variable in Angular. You get to see how easy it is to declare variables compared to doing it with Observables which has a more robust boilerplate code.

How to Create a Signal

Here, you will get to learn about the different Reactive primitives available in Signals, which are writable signals, computed and effects.

Reactive Primitives in Signals

Discover the foundational concept of Signals within Angular and its relevance in the ecosystem. Understand the pivotal role Signals play, addressing performance concerns and simplifying Angular application development.

 Getting Started with Signals

This video provides an insight into what we are going to do in this module.

Module 3 Introduction

In this module, you’ll learn how to combine RxJS and Signals when working with HTTP requests from the REST API. We will learn how to work with the Interoperability API when dealing with asynchronous operations in Signals.

Fetching Data from the Server using RxJS

Here we get to modify the code we wrote previously to fetch data from the server. We go ahead to show the simplicity of Signals by converting the data gotten from the Observable into Signals making use of the Interoperability API.

Using the Interoperability API to convert Http requests to Signals

Combine RxJS and Signals to navigate HTTP requests from REST APIs. Learn to leverage the Interoperability API for managing asynchronous operations within Signals.

Signals and Http Requests

Module 4 Introduction

In this module, we get to display how to spread data across different components with the use of Signals.

Adding Items to the Shopping Cart

In this module, we will utilise Signals to increase and decrease the number of items to add to cart =, as well as integrate functionality to remove an item from cart.

Integrate Counter Functionality and Remove Items from Cart

In this lesson, we get a summary of all the items that have been added to the cart, which includes the number of items bought and the cart total.

Implement the Checkout Page

Exercise

In this lesson, we will take a look at how to handle errors in Signals.

Error Handling in Signals

Explore the techniques of disseminating data across various components using Signals, facilitating efficient communication and data exchange.

Sharing Data Between Different Components with Signals

We will do a review of all the concepts learned in the course and also look at the upcoming features to be integrated into Signals.

Wrapping up the Course

In the final module, we comprehensively review every concept that's been covered in this course. Additionally, this module provides insights into upcoming features to be integrated into Angular 17 Signals.

Course Wrap Up

### How The Course Works:

- The "Build a Modern Web Application using Angular Signals" course is a comprehensive online program spanning five modules. Discover how to effectively utilize Signals to manage the entire state of an Angular application, integrate the newly built-in control flows, employ deferrable views, navigate components using lazy loaded routes, and implement Standalone components.
- Remote Access: Take advantage of the course from any location, allowing you the flexibility to engage with the materials at your convenience.
- Self-Paced Learning: Tailor your learning experience to your schedule, enabling you to progress through the course content at your own pace.
- Community Engagement: Collaborate and learn alongside a diverse community of fellow students, fostering an environment of shared knowledge and support.
- Structured Learning: Experience a well-organized curriculum designed to provide a cohesive and comprehensive understanding of Angular Signals in a logical progression.

### Understanding the Challenges

Learning Angular 17 can present various hurdles and frustrations for those new to the technology. As individuals navigate their journey into this advanced framework, they commonly encounter several challenges:

- Complexity Barrier: The intricate architecture and extensive feature set of Angular 17 can overwhelm newcomers, posing a significant learning curve.
- State Management Complexity: Managing the state of an Angular application efficiently, especially with the nuances of Signals, can prove challenging for learners.
- Integration Puzzles: Integrating and harnessing newly built-in control flows, deferrable views, Standalone components, and lazy loaded routes can be intricate and perplexing.
- Navigational Complexity: Understanding the intricacies of lazy loaded routes and effective navigation between components can pose obstacles to a smooth learning experience.

Navigating through these complexities without guidance can hinder the progress of aspiring developers aiming to master Angular 17.


### Advantages of Learning Angular 17 in 2023

- Enhanced Performance: In 2023, Angular 17 offers optimized performance enhancements, enabling you to craft high-performing web applications capable of meeting modern user expectations.
- Cutting-Edge Features: Stay ahead in the web development landscape by mastering the latest built-in control flows, deferrable views, and other advanced functionalities unique to Angular 17.
- Industry Relevance: With Angular continuing to be a sought-after framework in the industry, mastering Angular 17 ensures you remain competitive and relevant in the job market.
- Improved Developer Experience: Angular 17 introduces refinements and enhancements that streamline the development process, providing a more efficient and enjoyable experience for developers.
- Scalability and Maintainability: Learning Angular 17 equips you with the knowledge to build scalable and maintainable applications, crucial factors in modern software development.

### Why Learn Angular 17 in 2023

Angular 17 stands at the forefront of web development frameworks in the current year, offering you several compelling reasons to dive into its intricacies:
Embrace the evolution of web development by mastering Angular 17 in 2023. This advanced version presents you with enhanced performance capabilities, cutting-edge features, and improved developer experiences. Remaining proficient in Angular ensures your relevance in a competitive industry, equipping you with the skills necessary to build scalable, high-performing applications that meet the demands of modern users.

### Course Content Overview

Course Overview:
Total Modules: **5**
Total Lessons: **12**
Total Video Runtime: **1 hour, 41 minutes**

### Summary:
This course is structured into five comprehensive modules, guiding you through the intricacies of Angular 17 Signals. From laying the groundwork with introductory concepts to diving deep into handling HTTP requests, sharing data between components, and culminating with a thorough review in the conclusion module, each section builds upon the last, empowering you to master Angular 17 Signals effectively.

Learn how to surgically manage state and optimize UI rendering with Angular Signals. This course introduces students to the world of Angular Signals, from reactive primitives to seamless interoperability between observables and signals. By the end of this course, you'll have learned how to build a highly performant, lightweight Angular application that features deferrable views, lazy loaded routes, and a PayPal-powered checkout flow. Additionally, you'll have learned the techniques needed to modernize older Angular applications so that they're able to fully leverage the power of Angular Signals.

Demystifying Reactivity with Angular Signals

Fetch data from a REST API making use of Signals.

Make use signals to add functionalities to the shopping cart

Checkout selected items from the cart using the available Signal APIs

How to manage state in an Angular application by making use of Signals

The importance of using Signals to enhance change detection

How to integrate a robust lazy loading approach, by making use of deferrable views and lazy loaded routes

Difference between using RxJS and Signals when working with data and asynchronous operations

How to structure an Angular application using Standalone components

How to work with the newly built-in control flows

How to Update the Cut Icon Dynamically in an E-commerce Website

This tutorial will explain how to update the cut icon dynamically in an e-commerce website. Currently, the cut icon does not reflect the number of selected items. We will integrate the counter functionality and the ability to remove items from the cut. To achieve this, we will make use of the product service file and computed properties. Additionally, we will update the cut component to display the selected items dynamically on the page.

To update the cut icon dynamically, changes need to be made in the product service file. We will create a computed property called 

 and set it to public. This property will compute the total number of items in the cut by accessing the 

 variable. We will then use string interpolation in the HTML template to display the dynamically selected values. This can be done by using the 

To integrate the counter functionality, the product service component needs to be injected into the cut component. This can be done by adding 

 to the cut component's control code. We will then loop through the products using an 

 block to display the dynamic data. This will be done within the 

 tag. We will access the product data using 

 and use string interpolation to display the relevant information such as thumbnail, type, price, and quantity.

---
title:  Integrate Counter Functionality and Remove Items from Cart
description: In this module, we will utilise Signals to increase and decrease the number of items to add to cart =, as well as integrate functionality to remove an item from cart.
code: https://gitlab.com/fullstackio/books/newline-course-apps/fundamentals-of-signals-in-angular-app/-/tree/main/module_4?ref_type=heads
privateVideoUrl: https://stream.mux.com/L8l02Bg02lIk6bWUMoF02WyeWzlM7I019i01Yn6ewFYk00eWQ.m3u8
isPublicLesson: true
---

# How to Update the Cut Icon Dynamically in an E-commerce Website

## Introduction

This tutorial will explain how to update the cut icon dynamically in an e-commerce website. Currently, the cut icon does not reflect the number of selected items. We will integrate the counter functionality and the ability to remove items from the cut. To achieve this, we will make use of the product service file and computed properties. Additionally, we will update the cut component to display the selected items dynamically on the page.

## Updating the Cut Icon

To update the cut icon dynamically, changes need to be made in the product service file. We will create a computed property called `totalItems` and set it to public. This property will compute the total number of items in the cut by accessing the `cutsItems` variable. We will then use string interpolation in the HTML template to display the dynamically selected values. This can be done by using the `productService.totalItems` variable.

## Integrating the Counter Functionality

To integrate the counter functionality, the product service component needs to be injected into the cut component. This can be done by adding `public productService` to the cut component's control code. We will then loop through the products using an `ngFor` block to display the dynamic data. This will be done within the `<tr>` tag. We will access the product data using `productService.hotItems` and use string interpolation to display the relevant information such as thumbnail, type, price, and quantity.

deji adesoga

So before we integrate the counter functionality as well as removing items from

us to update a cut icon that is the current number of cut icon is not

item. I want this to be dynamic. So that anytime we select an item, it gets

So to do that, we are straight to the product service file. So quickly in the

file, we need to make use of computed to achieve this particular functionality.

cuts items variable, I can just create a variable code, total item, you can say

saying public and then brutal items is opposed to computed. And then as we know

take in callback and if that's arrow and then we can see these dot cuts items

well, no signals is a function. Do not forget to add your bracket at the end of

I'm going to save copy the total items variable heads to the nav bar component.

import the product service. Yes. So in the construct, I can just say probably

service in the HTML templates where we have the number zero, we need to make

interpolation to display the dynamically selected values to do that. All we

say product service dot total items. I'm going to save every time I've done so

head to the browser and wait for the page to refresh. Before we select any item

ensure that our local storage is currently empty. So in the browser, I open

it's local storage, clear local storage, refresh the page once more and then

out. Now we have to select this item right here as you can see, we currently

we elected one item. If I select another item is going to be updated here and

item, it gets updated to three where select two more items. You should get

and in our local storage, you also have five items. This is possible through

call with the sample line of food. Now we can illustrate the cuts components to

selected items dynamically on this page because currently, all we have right

data. To do that, we need to illustrate to visual studio code. Instead of

wait straight to our cut component. As you can see, every data here is static

dynamic in a moment. So to do that, wait straight to the cut component dot CS

product service component inside our construct of back and just say public

I've done so many times in this course. I'm going to call the product service.

product service, we need to look through using the our code block to display

is going to be done within the TR tag. We have right here too. Let me see where

where this ends. I'm just going to create some space show and then right on top

we have all the whole block and then say products or product service dot hot

make use of that to track any changes in the area and pass product dot

this is where to be in a bracket. So we open a bracket screw to the closing tag

and then for the at empty block within the at empty block, we have the deep

part. Probably we can make this single of I say no item in part 10. We need to

value. First one is the product storm nail. So I'm going to get rid of this

here and then make use of string interpolation by saying product dot thumbnail

We can say product dot type two for the price can say product dot price.

instead of this default value, we have here, you can see product dot one city.

the writing and going to see everything we've done so far and as straight to

can see, we get all selected products on the cut components. One more thing we

integrate this total right here where we have these 10,000 USD, we can just

interpolation to get the total. All we need to do is just to say product dot

by products dot quantity. I mean, this is pretty much straightforward. And with

the total price. If I see one extra browser, you can see the current total

the current quantity is one. So every item we select, because it's a single

it, you get the same price. Another thing I want to do is to disable the

both in. If there are no items in cut to do that, we scroll to the proceeds to

create a disabled attribute and then pass a condition that says product service