Implement a simple countdown in Angular

Image for post
Image for post
Photo by Eder Pozo Pérez on Unsplash

Counting down to some special event is something we do a lot.

In this guide, I will show you how to implement a simple and effective countdown timer in Angular using RxJS.

So far, 2020 has been a roller coaster year. How about we implement a countdown timer to the year 2021? The countdown timer we will implement will be updated to the second.

Without further ado, let’s jump into the code.

Create an Angular application

We will get started by creating a simple Angular application via the CLI with the following command.

$ ng new count-down-timer --defaults

Once the application is created go into its root directory. …


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

Image for post
Image for post
Photo by Erik Mclean on Unsplash

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

Image for post
Image for post
Photo by Steve Johnson on Unsplash

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

Image for post
Image for post
Photo by Crystal Kwok on Unsplash

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

Image for post
Image for post
Photo by Caspar Camille Rubin on Unsplash

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

Image for post
Image for post
Photo by Patrick Perkins on Unsplash

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

Image for post
Image for post
Photo by Angela Compagnone on Unsplash

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

Image for post
Image for post
Photo by Marius Serban on Unsplash

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.

Image for post
Image for post
div screenshot

HTML semantics are more explicit in representing HTML elements. …


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

Image for post
Image for post
Photo by Luis Quintero from Pexels

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! …


This tweet is a classic example of why western aid fails.

On Wednesday Beyoncé via her charity, BeyGood posted this tweet regarding the ongoing End SARS campaign: “I am heartbroken to see the senseless brutality taking place in Nigeria… we are collaborating with coalitions to provide emergency healthcare, food and shelter.

This tweet caused so much outrage and rightly so. The End SARS campaign has nothing to do with hunger or shelter. The only real hunger that is in Nigeria at the moment is that for Justice.

Image for post
Image for post

There is more to this tweet, however, which I believe underlines why western aid has mostly failed in many African countries. …

About

Mwiza Kumwenda

I develop software by profession. My interests include: history, economics, politics & enterprise-architecture. I am a child of God.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store