Angular – Natan Code

How to create an Interceptor in Angular and Why?

In Angular, an Interceptor is an feature that allows intercepting HTTP requests . This enables you to add logic such as: Hands on We can create an Interceptor with the following command. Now, let’s create an Interceptor to add JWT tokens. This is a real example of an Interceptor. We have a service that retrieves…

How do @Input and @Output work in Angular?

In Angular, @Input and @Output are essential decorators that facilitate communication between components. They allow data to be passed from a parent to a child component (@Input) and events to be emitted from a child to a parent component (@Output). @Input It allows the child component to receive values from the parent component. The parent…

How to make custom directive in Angular?

Before creating a custom directive, we need to understand what a directive is in Angular. “Directives are classes that add additional behavior to elements in your Angular applications.” “Use Angular’s built-in directives to manage forms, lists, styles, and what users see.” The different types of Angular directives are as follows: Directive Types Details Components Used…

What is Data Binding in Angular?

It’s a way of communication between TypeScript code and HTML template. Let’s see an example below. I created a component called “user”. We have a variable that stores the value of the “username” and a method that resets this value, it’s a method triggered by a click event in the HTML template. In the HTML…

How does work Deferrable Views in Angular 17 ?

In previous versions of Angular, to use lazy loading it is necessary to specify modules in the routes using loadChildren.This behavior can be observed in the documentation itself. Below is code taken from the documentation. In the new version of Angular 17 we can use Deferrable Views, so we can do lazy loading. Practice Let’s…

How does work New Control Flow Syntax in Angular 17 ?

Angular 17 has undergone significant modernization, introducing new syntax, and features, and achieving better performance. Notably, they made substantial transformations. In this post, we will focus on New Control Flow Syntax. The Angular 17 introduced the @if, @for, and @switch syntax. Let’s explore each one. @if block conditionally The @if block conditionally displays its content when its condition expression…

How does work Server-Side Rendering (SSR) in Angular 17 ?

Angular 17 has undergone significant modernization, introducing new syntax, and features, and achieving better performance. Notably, they made substantial transformations. In this post, we will focus on Server-Side Rendering (SSR). SSR Now, when creating a project, there’s a straightforward option to enable SSR. To create a new project with SSR, run: To add to an…

What is Client-Side Rendering, Server-Side Rendering and Static Site Generator ? How does it work in Angular ?

The types of rendering are crucial in a system. First and foremost, we need to understand the client’s requirements, and then we can determine which rendering type is the better choice.All rendering types have their own set of advantages and disadvantages; let’s explore each of them. Requirements You can find more here: https://nodejs.org/en https://angular.io/cli Client-Side…