REST API consumption – Angular Services and the Singleton Pattern-2
For the inclusion of a new set, we are using the POST method of the service that calls the API with the verb of the same name. We always pass the URL and, in this…
Author: Lina Maria Golvala
REST API consumption – Angular Services and the Singleton Pattern-1
One of the main uses of Angular services is undoubtedly communication with the backend of the application, using the Representational State Transfer (REST) protocol.Let’s learn about this feature in practice by preparing our project to…
Communication between components using services – Angular Services and the Singleton Pattern
A characteristic that we must understand about Angular services is that, by default, every service instantiated by the dependency injection mechanism has the same reference; that is, a new object is not created, but reused.This…
Using the inject() function – Angular Services and the Singleton Pattern
The inject() function allows you to use the same dependency injection feature but in a simpler way.Let’s refactor our component’s code: import { Component,inject} from ‘@angular/core’;import { ExerciseSet } from ‘../interfaces/exercise-set’;import { ExerciseSetsService } from…
Understanding the dependency injection pattern – Angular Services and the Singleton Pattern
In object-oriented software development, it is good practice to prioritize composition over inheritance, meaning that a class should be composed of other classes (preferably interfaces).In our previous example, we can see that the service class…
Creating services – Angular Services and the Singleton Pattern
Services in Angular are TypeScript classes that aim to implement business logic for our interfaces. Business logic in a frontend project can seem like a controversial issue because ideally, all logic and processing should take…
Propagating events from nested components – Components and Pages
We will add the options to delete an item from the list and increase the number of repetitions to our diary. First, let’s add the buttons to the list item template. In the entry-item.component.html file,…
Communication from the child component – using @Output – Components and Pages
We studied how parent components, which can be either smart or presentational, can communicate with their child components by using attributes marked with the @Input decorator.However, when we need the opposite, the child component passes…
Separating responsibilities – Smart and Presentation components – Components and Pages
The information flow of a single-page application (SPA) can be quite complex and, if you don’t think about this flow from the beginning of your design, it can affect the productivity and quality of your…
Best practice – using the TrackBy property – Components and Pages
After the *ngIf directive, the ngFor directive will probably be the directive that you will use the most in your Angular projects. Although simple, this directive can hide a performance and perception problem in the…