A look at the different ways you can provide a service in Angular

In this guide, we will take a look at the different ways in which you can provide a service in an Angular application. The method you choose to provide your service will determine the scope and visibility of your service to its dependents.

In Angular, a service can be anything from a simple value, a function, or a feature that your application needs. In most cases, however, services in Angular are classes that perform some specific function.

To be able to use a service via dependency injection you must register it with at least one provider.

In Angular, there are three main ways in which you can make your service available to its dependents. …

A simple state storage implementation in Angular

In this post, I will show you how you can implement a simple state persistence functionality in Angular by using a web browsers’ storage. This will allow you to persist settings or certain values that are important for the application.

To implement this functionality, we will make use of JavaScripts’ localStorage. But instead of calling localStorage directly as we do in vanilla JavaScript. We will create a simple service wrapper that encapsulates the localStorage functionality. All clean and simple.

Before we jump into the code, allow me to briefly introduce localStorage.

Background

localStorage is a system that allows you to access and store data using the browsers’ Document object. …

You do not always have to use an Angular pipe in the template

In this post I will show you how you can use Angular pipes within the Component code. Often, we use pipes within the template, however, pipes are just classes with some logic and can therefore be used in the typescript code too.

To illustrate the use of Angular pipes within a component I will use the TitleCasePipe. But the principles I outline should apply and work for any other pipes.

The TitleCasePipe basically transforms a string by capitalizing all first letters of the words in the string and makes the rest lowercase. …

How to install several versions of Node.js on a single PC

This post is a step-by-step guide on the recommended method of installing Node.js on a Windows PC using a Node Version Manager, popularly known as nvm.

Node.js is a popular, open-source, cross-platform JavaScript run time environment. It is widely used for both front-end and back-end software development.

If you are a front-end developer chances are high that you have worked with Node.js in one way or the other.

Background

The default and most common way of installing Node.js …

Angular naming guidelines

Introduction

In this post, I will share with you the good naming conventions that the Angular team advocates for. Naming is one of the things that we do the most as software developers, for this reason, it is important that we do it well.

Good naming practices are important in software because they facilitate:

• code readability
• maintainability of code and
• on-boarding of new developers to a team.

Angular is a very opinionated framework by nature and for a good reason. It helps ensure that our coding pattern is predictable hence easy to maintain.

Golden rules of naming

The golden rules of naming should form the foundation of your naming pattern. They must, by all means, be applied or followed. …

Racially connected terms face scrutiny

Background

The master-slave term has been a very popular term in tech and engineering. The use of the term goes back decades. It has mostly been used to show that a device or process controls one or more other devices or processes.

Of late, the master-slave word has come under scrutiny due to racial concerns. There has been growing concern as to what the term really represents and that it can be racially disturbing in many scenarios.

To that effect, there has been a movement, especially in the tech world to abolish the use of racially discriminating terms.

Current state

Tech giants Microsoft, Apple, Twitter, and Google all agree that offensive language has no place in tech. The open-source community has not been left behind either. For example, the Linux kernel team, Red Hat, PHP, MySQL, Jenkins are all adopting new terms to replace the master-slave term in their documentation and source code. …

Alternatives to the HTML div element

Introduction

In this post, I will show you how you can write clean and well-structured HTML code by utilizing semantics elements.

If you have been using HTML for a while you will have probably come across code that looks similar to the one below. Having a ton of div elements that your head starts to spin.

Note: The figure below is an example of bad HTML code.

HTML semantics are more explicit in representing HTML elements. …

How to avoid Observable memory leaks in Angular by using the async pipe

Introduction

In this guide, I will show you how to avoid memory leaks that are caused by unsubscribed Observables in Angular applications by utilizing the async pipe.

There are several advantages that async operator when it comes to subscribing to Observables, which include.

• It is easy to implement
• Clean and
• Automatically unsubscribes from observables

Rxjs Observables are popular and very widely used in Angular applications. Therefore, knowing how to avoid memory leaks caused by Observables is vital.

Memory leaks that are caused by unsubscribed Observables result in less performant Applications and can even cause browser crashes at their worst.

Why unsubscribe from an Observable

At this stage, you might be wondering: do I really need to unsubscribe from an Observable? The simple answer is; Yes! …