Sign in

In an Angular application you might need to run some checks before allowing the user to navigate to or away from a page. That’s where Angular Guards come into play.

The picture below displays how guards work. A user is trying to navigate in the application, but before allowing navigation there is a guard that is running some checks and then the guard can decide for the next steps: allow the user or not to navigate, display a confirmation/information dialog or even redirect the user somewhere else.

For this guide we will take a trip into Disneyland, Walt Disney and…

Great article Dewaun!

This line of code:

table$: Observable<Table["table"]>;

made me wonder why you didn't just define it: table$: Observable<Array<Row>>;

as it's basically an array of rows. I'm a big fan of accessing properties as Table.table because if you refactor the name, you will get the errors in compile time instead of run time. Friendly review :)

In this article I will create step by step an Authentication library and along the way will describe Interceptors and Guards.

Application Description

This application will have these pages: Login, Home, User Dashboard and Admin Dashboard which will have different access levels as described in the table below.

For the implementation we will need an Angular Application that you can set up following these steps:

  1. ng new auth-demo Create a new Angular Application
  2. ng g lib authentication Generate the authentication library
  3. ng g c home Generate the Home Component
  4. ng g c user-dashboard Generate the User Dashboard Component
  5. ng g…

In this article I will first implement a queue in typescript and will display data saved in the queue using Angular. Later on I will talk about priority queues and implement it using a similar logic. The idea is to display another type of queue where the elements will have a priority which will determine who will be pulled first.

Queue is a FIFO (First In First Out) data structure. Let’s think of a group of customers in the shop waiting to buy coffee. The one who arrived first will be served first. …

In this article I will implement a stack in typescript and will display data saved in stack using Angular. Later on we will use this stack to solve the problem where we need to check if a string of parenthesis is balanced.

Stack is a LIFO (Last In First Out) data structure. Let’s think of a stack of books. Adding a new book will place that on top of the stack and removing books will be from the top of the stack. …

According to the official documentation: “RxJS is a library for composing asynchronous and event-based programs by using observable sequences.” There are lots of articles and definitions around the web related to async programming, but still challenges developers at the beginning. In my opinion RxJS is more than a library, it is a way of thinking. The demo I will create in this article will be simple to give a full picture of event based programming and will cover some easy operations.

Demo Description

Let’s suppose we have a chart with 10 categories of data from A -> H and we…

In this article I will introduce a performant solution on how to implement a list with a large amount of data. I will start with displaying a short list and next will suppose that the data set is very large. The last step will be loading this large set from the backend. In each step I will introduce the challenges and the solutions.

Display a list of data

Let’s suppose we have created a new component and inside the component we have items, an array with 10 elements such as: items = Array.from({length: 10}).map((_, i) => `Item #${i}`);

We can…

When I first started programming dependency injection and all the concepts related to it seemed to be a bit abstract for me. I could still create services and inject them, but still there seemed to be a gap in my mind on how this implementation seemed to work.

In this article, first I will explain what are the issues DI had to solve by starting with an example where we DI is not used. Step by step I will introduce the benefits of using DI as a coding pattern and how it makes programming easier.

  • Code without DI

Let’s start…

Step by step guide: Application using NestJs and Angular

Just a few days before Christmas I came along with NestJs framework. Always wanted to give a try to NodeJs development, but the idea of a javascript backend seemed to keep me away.

NestJs is a framework for building Node.js server side applications and supports Typescript. Since almost all my experience is with Angular and NestJs provides an out-of-the box application architecture heavily inspired by Angular, it seemed like all the boxes were checked and I had to give it a try. For more information please visit NestJs Official Documentation.


When building applications at some point you will need the user input, either a value or a whole set of data. That’s when forms come into play.

Angular provides two types of forms: Template Driven and Reactive Forms. Depending on your requirements you will have to choose between the two. Template driven forms are easier to set up, but less scalable. If you have an easy form such as login where you will have only two inputs it might be a good idea to use template driven forms. Reactive forms are more customizable and scalable. If you have lots of…

AG Dev

Senior Front End Software Engineer focused on Angular. Passionate about learning new skills and sharing my knowledge. Blog in progress.

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