Angular

A few days ago, I was fixing a small accessibility issue and decided to remove some unnecessary wrappers around a few elements. After making those changes, all the tests passed successfully—including the E2E tests. Everything was green, so I opened a...

Don't care if you use Angular 14, 15...19; your apps are still under the Zone.js umbrella. Maybe you feel your Angular apps work well, but under the hood, with Zone.js, Angular needs to iterate over the entire DOM tree, impacting app performance. Thi...

In the summer, I refreshed my NgRx skills by building a small application to handle my favorite places. During that process, I enjoyed NgRx because I had real control over the state of my app. One thing that caused a lot of noise was the number of se...

When we need to write a test for components, it is not hard. The pain starts when our components begin to have dependencies, not only in the constructor or in the TypeScript file. The real challenge comes when we start to add dependencies of other co...

The race for AI continues. Alternatives like Ollama help us interact with AI models on our machines. However, the Chrome and Google teams are moving one step forward by enabling Chrome with Gemini Nano running in our browsers. Note this API is exper...

Side-effects! They are one of the most common tasks in our applications. In Angular, but build application if we don't take care the component ends with a lot of responsability, like get, process and render the data. But in Angular most of time when ...

When we work with request data in Angular to an external API, sometimes we need to add or send headers. The idea of repeating the code in each request is not something to feel proud of. For example, when working with the ball don't lie API, it requir...

In NgRx, when we want to get data from the store, the easiest way is by using store.select. It allows us to get any slice of the state. Yes, it sounds funny, but any slice returns an Observable<any>. For example: It is flexible but also risky becaus...

When you create actions in NgRx, you usually use the createAction function helper. We write our action names with an inline string about the source and the event, like [Cart] Update Price. This action is clearly linked with the Cart feature in our ap...

When we work with NgRx, tracing and debugging actions, knowing the current state of our store, and reproducing behavior are very important. We have a great tool to help us as developers debug and analyze our NgRx State: the Redux DevTools. The Redux ...

In a previous article, I wrote about managing the state in Angular by using Services, but when the application increases in size and needs to track and handle a large state, it becomes a bit complex and not easy to manage. For example, when we have m...

As developers, we create different types of applications. Sometimes, we work on data processing with forms or data visualization with grids or charts. But sometimes, we build applications that focus mainly on images. While making an app to show image...

When I need to build real-time apps with Angular, most of the time I use SignalR, but a few days ago, a friend mentioned SSE. I had never heard about it or had the opportunity to hear someone mention it, so I started to find out about it and was surp...

I was writing an article for Kendo about testing in Angular, but with the deprecation of Karma, I had some questions about the future of testing in Angular. I'm using Jest for my personal and professional projects, along with the Angular testing libr...

The Performance, this is one most important topics when we build applications, now days we work with huge amount of components and needs to think how to improve the bundle size in our apps. The Angular team knows that, and launches great and amazing ...

When working with libraries, we aim to share our code with teammates, not just keep it on our own computers. The easiest way to share and test our code is by using npm pack to create a zip version. Another option is to publish our package is with azu...

When building applications in Angular, maintaining effective communication of data between components or routes is crucial. Sometimes we use a state manager, services, or take advantage of the URL to provide information as a convenient alternative. C...

When we build an application in Angular, it works as SPA so it is a single page with multiple views or pages running in the client. But how can we navigate between each one without a new request to the server? The Angular router updates the address b...

When I see many chats connected with AI, a friend once said it's difficult, but it isn't. Today, I want to demonstrate how easy it is to build your own chat connected with AI and a nice interface using just a few lines of code. we'll learn how to cr...

In my previous article on building a sample store, I explored the animation feature in Angular 17. At the same time, I also developed an extensive product page feature. The product detail page needs to extract the product ID from the URL using the ro...

I'm constantly exploring ways to improve user interaction on websites. Recently, while building a store demo, I thought of enhancing the user experience when navigating between product pages. This led me to play with fantastic feature in Angular 17: ...

As 2023 comes to an end, I find myself reflecting on the valuable lessons and knowledge I've gained through writing. In addition to this blog, I create content for Telerik Kendo. Today, I'm excited 😊 to share with you my top Kendo UI articles from t...

When we write tests in Angular Jasmine and Karma are the default for testing library and runner, but the Angular team was working on bringing Jest to Angular. Today, we're going to experiment with the Jest Builder for Jest (Experimental) in Angular 1...

Angular 17 has been announced and is set to release in the upcoming days. It comes with a list of impressive new features, such as control flow, deferred views, hydration, server-side rendering (SSR), signals, and many more. One of the notable releas...

In the last half-year, I interviewed people to hire Angular Developers for my company. During this time, I learned a lot and noticed common errors made by some applicants. The purpose of this article is not to provide a one-size-fits-all solution for...

Yesterday, I was chatting with my friend Jörgen de Groot about Signals. As our conversation shifted to cover effects, he encountered the error ERROR NG0203. Later, another friend approached me with the same issue. I decided to compose a brief article...

Since Angular 16, I have heard a lot about Signals, the @angular/team did great work listening to the community and improving the Signals API with Rxjs interop. Yesterday I was talking with my friend Juan Berzosa he hadn't played with Signals yet, So...

As developers, we use a lot of our coding time to fix bugs. Debugging helps us find and remove errors in software development. But sometimes, finding a bug takes longer than fixing it. That's when we need to learn some ways to debug our apps. Let's i...

Today, one of our teammates was curious about which RxJS operators they'd need to create a search feature in Angular. I let them know that while RxJS has loads of operators, they don't need to know them all. I usually stick with Map, Filter, Tap, Swi...

Since Angular 14, we can convert our class guards to functional and also combine them with inject making it so easy to write guards Angular applications. When we move from class to functional, the constructor disappears, and the dependencies come fro...

When I started to play with templates and dynamic content in angular, I get surprised by multiple directives in angular to work with it ng-template, ng-container, and ng-content. Each one is pretty similar initially; each has exceptional use cases an...

Since Angular 14/15, there has been an alternative way to inject dependencies into our Angular applications. I will show two cases of using the inject function with Angular 14/15. Inject Dependencies in Functions Using inject, we can create functions...

When we start to build an application in Angular and need to create forms, we must pick one of the two flavors: "Reactive" or "Template Forms". For beginners, Template Forms are natural and appear less complex for new joiners, but some developers may...

When talking about unit testing, the first definition that comes into our head is to test the minor testable parts of an app, like functions, methods, and classes. It sounds perfect for a simple function or isolated class without dependencies, but it...

ESBuild is a swift JavaScript compiler used for ViteJS. You can play with him in Angular, changing a single line in the angular.json file. Note: It is in experimental mode 😜 Change the builder from "@angular-devkit/build-angular:browser" to "@angula...

I continue to play with the new features of Angular 14/15, and one pending task is to learn about Typed Reactive Forms. The strict forms help us avoid many common issues when working with our forms. The best way to learn and understand why to use Typ...

Today I was talking with my friend Leifer, and he asked me some about Functional Guards in Angular (14/15) with some questions. How do functional Router Guards work? Can The Class guards continue working in Standalone Components? How hard is conve...

Today with my friend @alt148 I was playing with Dynamic Forms, and we discovered changing one form control can trigger the validation several times in the validation process. For example, we have a form with a field, and in every key press, the form ...

In Angular Apps, making and updating forms is done by hand. Even small changes like adding a new field or changing its type can be difficult. Why not make forms adaptable to business changes? Why not transition to dynamic forms instead of hard-coded ...

Since version 15, Angular introduced Standalone Components as an easy way to build module-less applications. One of the benefits of Standalone Components is that they make Angular easier for new developers to learn and use, as they do not require an ...

When we build an Angular application with multiple modules in a large app, the main script file becomes a giant monster. One alternative to improve the user experience is to use the Lazy Module. Today, We learn how to use lazy loading to enhance the...

In Angular, we have a few ways to add libraries, for example, using Angular schematics or using Angular libraries, which export modules to add to the app.module. But what happens when we have a standard library.js or ui.css and need to add it to use ...

I worked in a few companies building a UI Library or company framework to use in multiple products with the dream of having a great UI, consistency, and the same behavior for the users. The UI Library's idea helps the developers prevent the duplicity...

In Angular when we build components with public properties or the state to share with others, some options come into our heads to solve it: Emit an event using the new value of the component state. Inject service with Subject to share the state. Inj...

When we need to have different versions and use cases and make it flexible to the changes, however, some stuff becomes a bit complex. For example, we need to show the list of the country in one case, the company flag or the name of the selected count...

When we build our Angular apps, splitting the code into modules is good to keep the code in a specific place, but sometimes we need to break it into the project to put everything in an isolated area. By default, Angular CLI generates an initial appli...

When we build an app, some data like the menu and options don't change with frequency. The best approach is to cache it because when the user moves around the app, the data to the server again impacts the speed and user experience. Rxjs provide us wi...

Angular help us to convert values for display using Pipes; the pipes are a way to transform input data to a desired or wished output. A bad practice is to use a method in the template to convert data because it hits the performance; when you need to ...

In Angular it is very common to subscribe to multiple observables to show data in our template, and use these observables in our template, we use multiple async pipes. async pipe, make easy to subscribe and unsubscribe from the observable in our tem...

In Rxjs, when we work with observables handling the errors is a bit confusing for beginners because you can think of a try-catch, but Rxjs comes with operators to manage it, so what can I use and when? Let's move to each step with code, the example u...

When we start to build the application and feel the code duplicated are in several places, our first idea is inheritance, because it solves our problem with repetitive code. It appears as a solution (and it's) and works. But the problem comes when we...

When we build components in an application, we maybe need to share or send data from parent to child without a direct connection. 👉🏽 Why pay for hosting? Click here to deploy your Angular apps for free on a reliable VPS Angular provides different...

Angular, by default, comes with Jasmine; it is a great testing framework. I spent one year and a half running and writing tests with Jasmine, it works, but the market is moving to Jest and Testing library. Don't get scared because Jest is more straig...

When we go to a party, I love to have all beers ready to drink and take one, but sometimes taking time to pick from the fridge to the table and stay waiting is not a good experience. The same happens with our users working with our angular apps; we s...

When we use external libraries, it is widespread to declare and use a global object. But the price to pay is to get a complex testing scenario and, of course global an object like magic is not a “good practice”. How do you tell Angular about an exter...

One of the simplest dishes to prepare is a burger. Though the base remains the same, its contents can vary – so let's create our versatile burger component. Today we explain how to use ng content to provide an area flexible and multiple slots. Use n...

When we build components, it needs to be flexible, because they can be used in many places or contexts, sometimes changing layout and colors. For example, Our customer wants a list of contacts; it needs to show as a card with the picture, name, and d...

When we work with Sass and Angular, importing files is a very common task, and if you have more than 10 files and want to change the path of your sass structure? @import 'shared/styles/colors'; @import 'shared/forms/input'; @import 'shared/forms/sele...

Today I was helping a new guy in angular with differences between the bind data because it provides 2 ways to move data to DOM, One-way and two-way data binding. It helps us to build dynamic apps. It binds the data from our component to the DOM, unid...

Last month I set up my blog with Angular Universal (Server Side Render); this is about my steps in installing SSR in my blog, so keep in mind a simple blog with only text with HTTP requests to contentful, so it is a real scenario, but the simple case...

One way to subscribe to observable in Angular is async pipe into the HTML template. It is easy but when you have several subscription use ng-container with *ngIf is a common solution, like : <ng-container *ngIf="userAuth$ | async as user"> <span...

By default, installing angular-CLI gets the latest version, but sometimes we work with projects built in an old version. To downgrade your current angular-cli, follow these steps. Remove angular-cli sudo npm uninstall -g @angular/cli npm cache clean ...

If you are using Angular and need to access DOM with SSR, then use the domino package. Domino provides support for the DOM API and also CSS for querySelector(), querySelectorAll(), and matches(). Install the domino package from your terminal. npm ins...

I am back with Angular, and today I was reading about the Angular Modules, which help us to encapsulate and share our code between apps. If you have been working with java or .net is like a library where you can keep some functionality private or pub...