Tutorials on Angular

This article dives deep into the realm of micro-frontends, with a particular emphasis on the Qwik Framework. This article also explores why Qwik may be a superior choice for managing micro-frontends compared to its counterparts like React , Angular , Vue , and Svelte . Micro-frontends represent an innovative design approach where a frontend app is partitioned into small, independent, manageable units that operate cohesively. Each unit, known as a micro-frontend, is managed by a separate team, leading to highly efficient and scalable development processes for complex applications.

SEO is a critical element for any online platform's success. As SEO gained momentum, web development technologies like React , Angular , Vue , and Svelte had to integrate SEO into their core structure. However, there is a technology designed from scratch to incorporate SEO principles into its core structure — Qwik . This article will explore how Qwik promises superior SEO performance compared to other popular web development technologies.

There are a bunch of GraphQL clients that exist. How do you know which one is right for you? I'm going to discuss some of your options, but let's cut to the chase: If you're building a front-end web-app, I recommend you use Apollo Client. If you want to take my recommendation, you can just skip this and move on with your life.

Did you know you can greatly improve the performance of your Angular apps with Angular Universal? It's pretty amazing in that you can boost the performance of an Angular app from a Lighthouse score from 66 to 95+ points -- with the right techniques. But what is this magic Angular Universal and how do we use it in our apps? Well it helps to look at the problem first. Single-page-apps (SPAs) have at least one big pitfall: they are rendered in the browser rather than on the server. When we render a "normal" Angular app - we first have to download the code and then run the app.

In this article, we're talking about blazing fast performance with Angular Universal with server-side-rendering (SSR). One of the great things about SSR is that we get to use the same code on our frontend and our backend to render our app. Well, sort of. When we use the same code, right off the bat we have a problem: the browser is not the server and there are differences between what we can do in each environment.

Our applications are going to have authenticated users, but how do we pre-render SSR content that is protected only for users of our app? That's what I'm going to show you in this post. Remember that with Angular Universal we can parse incoming HTTP requests on our server of our Angular app and then use that data to show content, depending on who is looking at it.

In this post, we're going to learn how to use Node.js in your Angular app and pass data between the backend and the frontend . Angular Universal provides a tool called TransferState that will help you prevent duplicate data fetching -- it's super handy and a bit advanced. Below is a tutorial that introduces the ideas of TransferState and how to use it, but if you want a step-by-step walkthrough with complete code, then grab a copy of the course . The course is about 270+ pages over 40 lessons that teach every step to creating blazing fast Angular apps. Angular Universal is a powerful tool to address the SEO pitfall of Single Page Applications. Unfortunately, it's not a magic wand, and sometimes you need to adjust your application to make it efficient. Such a problem occurs when your application performs an HTTP call (to the back-end) during the initialization. Does it make sense to perform that call as well in the back-end as in the front-end?

ngx-translate-extension is an extensive library of ngx-translate. can be installed using npm.

Angular Material has been one of the most popular component libraries for Angular developers in recent times. In this article, we will discover the reasons for its popularity, learn how to set up a new Angular Material app and customise it with your own theme and typography.

In this article, we'll learn how to use PrimeNG in your angular project from scratch. Since PrimeNG is a massive collection of UI components, we've picked the three most useful ones which any beginner can use in their angular projects. We'll be implementing autocompletion, chart model, and form validation features in this article.

Directives are one of the least used features in Angular. They are often overlooked as devs typically tend to put all the logic into components. Lack of a clear understanding of how directives work also contributes to their underuse. In this article, we will learn all about directives, when and how to use them, and look at some useful real-world examples to cement this understanding.

In this blog post, we will look into what are entryComponents, why is the purpose of entryComponents, why do we no longer need to use them after Angular Ivy.

Web MIDI API is an interesting tool. Even though it has been around for a while now, it is still only supported by Chrome. But that's not gonna stop us from creating a playable synthesizer in Angular. It is time we bring Web Audio API to the next level!

In this article, we will explore the different features of the Angular router and learn how to use it to build routing for various use cases.

In this article, we will explore the different commands and features of the Angular CLI.

Web Audio API has been around for a while now and there are lots of great articles about it. So I will not go into details regarding the API. What I will tell you is Web Audio can be Angular's best friend if you introduce it well. So let's do this.

When faced with a need to visualise data, many developers' first instinct is to reach for a 3rd-party charting library. There's nothing wrong with this: there are several robust and full-featured libraries out there, and it's usually smart to leverage existing, good quality code. But we shouldn't forget that Angular, coupled with modern CSS features, also provides a great base on which to create our own, bespoke visualisation components. Doing so gives us the ability to tailor them to our exact use-cases, and avoid the inevitable trade-offs and bloat that comes with trying to solve for the general case of visualisation and charting. Also, creating visualisation components is just plain fun. In this article, we'll explore the process of creating a bar chart component for Angular. Even if you've created similar components before, the approach here might surprise you. We won't be rendering to a canvas element, or to dynamic SVG. We won't be using D3, or any dependencies besides those that come with a standard Angular CLI app. We won't be using any listeners or polling to detect resizes and run complex and flaky layout code. Instead, we'll strive to use modern CSS features, in particular grid and custom properties, to build the component's layout in a declarative and automatically responsive way. The finished chart can be viewed in this simple demo , or in a more complex demo .

Hello, Shalom, Ni Hao, Bonjour, Privet, Ciao, Marhabaan, and Hej! Good news everyone! Netanel Basal , who brought us the sleek state management of Akita , and the efficient testing tools of Spectator , has done it again 😎 He recently introduced Transloco - an internationalization (i18n) library for Angular, perfect for anyone seeking to simplify the i18n/l10n process. Transloco's rich API allows you to manage your app translation files efficiently and cleanly, and along with its various provided plugins, it dramatically reduces the chances of translation error, while automating many of your translation-related tasks. It does so by allowing you to define translations for your content in different languages, then switch between them easily during runtime. Here's how to get started:

Summary

Building a good, reliable drag-n-drop email editor is hard. Every time we wanted to add one in any of our projects, there weren’t many good options available that were polished and reliable enough for commercial use. After months of search, we decided to build one that can be embedded in any web app within 5 minutes. It’s available on GitHub and npm . Here’s what it looks like:

If you’ve been developing frontend applications recently, you’ve undoubtedly heard of Cypress.io. Cypress is a powerful testing framework that makes writing tests easy and really fun. I’ve used Cypress on a number of projects, and had a great experience. In this post I’m going to introduce Cypress, and walkthrough using Cypress with an Angular project.