Blog posts with category angular

Cover Image for Angular 17 Defer block: Create a Lazy-loaded Youtube Player for a blog!

Angular 17 Defer block: Create a Lazy-loaded Youtube Player for a blog!

Interested in maximizing your Angular app's efficiency by learning how to lazy load components using the new Defer block in Angular v17? In this post, I'll walk you through the details of building a lazy-loaded video component and explore the various options available to trigger lazy loading.

Cover Image for Don't use Signals with Angular Reactive Forms

Don't use Signals with Angular Reactive Forms

Hey folks! In a recent post about Angular signals and forms, I mentioned some potential issues when using Angular signals with the Reactive Forms API. Today, let's take a deep dive to fully understand this gray area and find some good solutions.

Cover Image for How to build an Image Cropper Control in Angular

How to build an Image Cropper Control in Angular

In this tutorial we'll be exploring how to build a robust Image Control Component in Angular that enables users to crop their photos to preferred dimensions right before they get uploaded to the server. If you've ever wondered how to do this, you're about to find out!

Cover Image for How to use Signals with Angular Forms

How to use Signals with Angular Forms

Welcome everyone! Today, we're going to delve into how to use signals with your Angular forms and identify the best strategy to implement them.

Cover Image for I refactored my Angular and Firebase Sign up App from RxJS to Promises!

I refactored my Angular and Firebase Sign up App from RxJS to Promises!

Refactoring Angular Code: From Observables to Promises

Cover Image for I refactored my Angular and Firebase Sign up App to Signals!

I refactored my Angular and Firebase Sign up App to Signals!

In this blog post, we'll take a look at an Angular application I developed that uses Firebase for user authentication with RxJS Observables. We'll refactor the application as we convert from Observables to the Signals API in Angular version 16. Let's dive in!

Cover Image for How to create a Dark Mode with Angular and TailwindCSS

How to create a Dark Mode with Angular and TailwindCSS

As developers, we strive to make user experience as great as possible. Dark mode has become an essential modern web app feature that enhances user convenience, especially for those who prefer a softer light on their screens during low light conditions.

Cover Image for Create a responsive card grid in Angular with CSS (2023 edition)

Create a responsive card grid in Angular with CSS (2023 edition)

Don’t you just love a good card grid? Well, I know I do. Card grids light up the web! They allow us to present our information in a user friendly way - using images and graphics as we please.

Cover Image for Angular Signals + Firebase: Bye Bye RxJS?

Angular Signals + Firebase: Bye Bye RxJS?

I built a simple contacts app recently with Angular signals and firebase and discovered that I didn’t actually need to use RxJS at all. The app does everything that a typical CRUD app should do - so this got me thinking - with signals do we even need RxJS anymore?

Cover Image for Create a Simple Contacts App with Angular Signals (2/2)

Create a Simple Contacts App with Angular Signals (2/2)

Let's continue with our Angular Signals introduction by building a simple contacts app.

Cover Image for Create a Simple Contacts App with Angular Signals (1/2)

Create a Simple Contacts App with Angular Signals (1/2)

The Angular team has introduced a set of new reactive primitives in v16 called Signals. In this article, I'm going to introduce you to the concept of Angular Signals and we're going to build up a simple contacts app using signals and material components!

Cover Image for How to upgrade to the new Angular Typed Forms!

How to upgrade to the new Angular Typed Forms!

Angular 14 was an exciting release because it finally brought out Typed Forms. But how do we go about using them? In this article, I’ll show you exactly how to do it along with some tips and tricks to make your form code better.

Cover Image for Create a responsive sidebar menu with Angular Material

Create a responsive sidebar menu with Angular Material

Sidebar navigation menus are the most common layout pattern used by web apps nowadays. But most of the components that we have are not really responsive. In this article I'm going to walk you through creating a truly responsive sidebar navigation menu in Angular using the Angular Material library.

Cover Image for How to add loading spinner in Angular with RxJS

How to add loading spinner in Angular with RxJS

In this article, we'll learn how to add a simple loading spinner in Angular using RxJS and then use an HttpInterceptor to automatically show a loader on all network calls in our Angular app.

Cover Image for Create Multi Select List with Angular CDK Selection Model

Create Multi Select List with Angular CDK Selection Model

In a previous post, we created an Angular material list with infinite scroll. In this post, we're going to convert that into a Multi Select List with the Angular CDK Selection Model.

Cover Image for How to add infinite scroll to Angular material list

How to add infinite scroll to Angular material list

If you've ever had to deal with large lists in your web app, you're probably familiar with infinite scroll. Infinite scroll is a common UI/UX solution to the problem of presenting a large list to your users as when they need it. In this article, we're going to add an infinite scroll in Angular using the Angular CDK library.

Cover Image for Create Dynamic Form Controls in Angular with FormArray

Create Dynamic Form Controls in Angular with FormArray

In this tutorial, we'll learn how to create dynamic form controls in Angular using Angular FormArray API.

Cover Image for How to add Async Validation to Angular Reactive Forms

How to add Async Validation to Angular Reactive Forms

In this article, we'll learn how to add async validation to your Angular reactive forms.

Cover Image for Simple State Management in Angular with NGRX Component Store

Simple State Management in Angular with NGRX Component Store

In this article, I'm going to show you a simple way to introduce state management into your Angular apps with the NGRX Component Store package.

Cover Image for Angular Material Dark Mode in 3 steps

Angular Material Dark Mode in 3 steps

A dark mode is a must-have little feature for your Angular web application. It is easier on the eyes and less draining for your smartphone battery.

Cover Image for How to lazy load Angular Material Dialogs

How to lazy load Angular Material Dialogs

In an earlier post, I showed you how to create reusable confirmation dialogs with angular material components. In this video, we'll cover how to lazy load your material dialogs using an advanced way with Angular v9+.

Cover Image for Create Reusable Confirmation Dialogs with Angular Material

Create Reusable Confirmation Dialogs with Angular Material

In this post, I'll show you how to create reusable confirmation dialogs, using Angular services and the Material Dialog component.

Cover Image for Multi-Slot Content Projection in Angular

Multi-Slot Content Projection in Angular

In a previous article, I introduced you to the concept of Content Projection in Angular and how it can be used to design flexible components. In this article, I'll continue with that and show you how to add multi-slot content projection in Angular.

Cover Image for Better Angular Components with Content Projection

Better Angular Components with Content Projection

In this short article, I'll introduce you to the concept of content projection in Angular and how we can use it to create reusable but more flexible components in our apps.

Cover Image for Create a responsive card grid with TailwindCSS and Angular

Create a responsive card grid with TailwindCSS and Angular

In a previous article, we built up a nice card view layout with TailwindCSS and Angular. In this article, we'll continue with that and convert it into a responsive card grid with TailwindCSS - without writing a single line of CSS!

Cover Image for Create a blog post card layout with Angular and TailwindCSS

Create a blog post card layout with Angular and TailwindCSS

In this article, we'll create a blog post card layout using Angular and TailwindCSS and it's utility first pattern.

Cover Image for How to add TailwindCSS in Angular 11.2

How to add TailwindCSS in Angular 11.2

In this article, I'll quickly show you how to add TailwindCSS to your Angular 11.2 app so you can get building your layouts with it.

Cover Image for Add spring animations to your angular app with popmotion

Add spring animations to your angular app with popmotion

You might have heard of spring animations recently with popular libraries such as react-spring and Framer Motion in the React world. I was on a hunt recently for a similar package in Angular, but found it missing. Angular's own animation API is quite powerful, but it relies on CSS based animations which are difficult to map to spring based animations.

Cover Image for Create a responsive card grid in Angular using Flex Layout

Create a responsive card grid in Angular using Flex Layout

If you're developing a web app in the year 2023, then it is expected that you'll be handling the layout for different screen sizes. Most of your users will probably be on their mobile devices! Angular Flex Layout is a great tool in your hands - to make sure your layouts work well on all devices.

Cover Image for Angular vs React: a code comparison for developers

Angular vs React: a code comparison for developers

Being an Angular developer, I've always been curious about the React ecosystem and how to code in React. Recently, I dived into learning more about React and as a result coded up a simple app in both Angular and React to study the differences. I'm now able to do an Angular and React code comparison!

Cover Image for Design a Weather Card With Angular Material and CSS

Design a Weather Card With Angular Material and CSS

Cards an essential UI element nowadays for almost any web application. Here is how to create a simple Angular Material card which shows the weather for today.

Cover Image for Create a multi select chips component with Angular Material

Create a multi select chips component with Angular Material

I was going through the material design spec document the other day and came across the ever so versatile material chips. They're versatile in the sense that you can use them as action buttons, filter buttons or selection buttons depending on your use case. For instance, I wanted to use them as multi select chips.

Cover Image for Angular material tabs with lazy loaded routes

Angular material tabs with lazy loaded routes

Tabs are a great UI pattern to divide up complex content of your web app into easily digestible pieces. You can use a few tabs or several tabs, each catering to a different section in your app.

Cover Image for Angular Animations: Create a card flip animation

Angular Animations: Create a card flip animation

Animations add a nice touch to any application, if they're used in suitable places and not overdone. But when you're developing games, they are an absolute must!

Cover Image for How to create a card memory game in Angular

How to create a card memory game in Angular

Angular is usually associated with creating great enterprise level applications. However, that is not all the framework can do! In this article, I'm going to explain how I came up with a card memory game in Angular from scratch. It is inspired from a real card game we used to play when we were kids to test our memory.

Cover Image for How to add code splitting to your Angular app

How to add code splitting to your Angular app

As web apps grow in their capabilities, we also see an increase in their bundle sizes. At one hand we need to ship more code for cool new features. On the other hand, we also need third party libraries and their code for everything to work.

Cover Image for Generate PDF in Angular with PDFMake

Generate PDF in Angular with PDFMake

Recently I worked on a feature for a client that involved generating a PDF document from his Angular web application. After some research we decided to use PDFMake for this purpose.

Cover Image for Truncate multiple line text in Angular like a pro

Truncate multiple line text in Angular like a pro

Truncation is a common problem when developing user interfaces with varying lengths of text. While truncating a single line of text is easy through good old CSS, how to truncate multiple line text can be a challenge!

Cover Image for RxJS in Angular: Creating a Weather App

RxJS in Angular: Creating a Weather App

RxJS in Angular can seem a bit difficult at first. But once you learn to leverage its power, it makes your code cleaner and more readable!

Cover Image for Create a responsive navbar in Angular using Flex Layout

Create a responsive navbar in Angular using Flex Layout

Designing a navbar (or a toolbar) is easy for one screen size, but to make a truly responsive navbar, Flex Layout provides us with some neat tricks we can use!

Cover Image for Upgrading your app to Angular 9: A short guide

Upgrading your app to Angular 9: A short guide

Angular 9 is here in all it's glory and you want to try it out as soon as you want. However, there is just this problem of your existing app and its complexity that makes you want to really think before taking the jump. Well, here is a small guide to help you through the process.

Back to the blog