Introducing resource

Angular 19 brings an exciting addition to its toolkit: the Resource API. This API is designed to simplify asynchronous data fetching and state management, making it more declarative and easier to integrate into Angular’s reactive ecosystem.

In this blog, we’ll explore:

• The benefits of the Resource API
• How it compares to traditional HttpClient implementations
• A complete example using products data, showcasing filtering by category with linkedSignal

What is the Resource API?

The Resource API leverages Angular’s reactivity model to provide:

• Declarative data fetching: Define and manage resources with minimal boilerplate.
• Automatic state management: Built-in handling of loading, errors, and data updates.
• Reactive signals: Seamless synchronization with Angular’s signal and linkedSignal.

How Does It Compare to the Traditional Approach?

The Old Way

In pre-Angular 19 applications, data was often fetched using HttpClient within services, requiring manual state management. Here’s an example:

// Old service implementation
getProducts(): Observable<Product[]> {
  return this.http.get<Product[]>('https://api.example.com/products');
}

// Old component implementation
this.productService.getProducts().subscribe({
  next: (data) => { this.products = data; this.isLoading = false; },
  error: (err) => { this.error = err.message; this.isLoading = false; }
});

Drawbacks

1. Manual State Management: Developers had to handle loading, errors, and data updates manually in every component.
2. Boilerplate Code: Each service and component required repetitive code for fetching data and managing states.
3. Complexity with Derived States: Filtering and transforming data often required separate streams or additional logic.
4. Inconsistent Practices: Different developers might manage states differently, leading to inconsistent patterns across the codebase.

The New Way with Resource API

With the Resource API, the repetitive parts of state management are handled automatically:

products = resource({
  loader: async () => {
    const response = await fetch('https://api.example.com/products');
    if (!response.ok) {
      throw new Error('Failed to fetch products');
    }
    return response.json();
  },
});

Why It’s Better Long Term

1. Declarative Syntax: The Resource API makes data fetching and state management part of the Angular reactivity model. Developers define what data they need and how it should react to changes, and Angular handles the rest.
2. Built-In State Management: Automatic handling of loading, error, and data states simplifies component logic.
3. Derived State with Signals: The seamless integration with linkedSignal allows for effortless creation of derived states (e.g., filtering products by category).
4. Reduced Boilerplate: Say goodbye to repetitive loading/error handling code in every component.
5. Consistency: Provides a standard way to manage data across the application, making it easier to onboard new developers or refactor code.
6. Future-Ready: The Resource API aligns with Angular’s long-term strategy of reactive, signal-based development, ensuring compatibility and smoother upgrades in the future.

Building a Product List with the Resource API

Let’s dive into a practical example: fetching and displaying products with filtering by category.

Service Implementation

Here’s how to set up the Resource API in your ProductService:

import { Injectable, signal, resource } from '@angular/core';
import { Product, Response } from './Product';

@Injectable({
  providedIn: 'root',
})
export class ProductService {
  private apiUrl = 'https://dummyjson.com/products';

  // Signal to trigger the resource loader
  private trigger = signal<void>(undefined);

  // Resource to fetch products
  products = resource({
    request: () => this.trigger,
    loader: async () => {
      const response = await fetch(this.apiUrl);
      if (!response.ok) {
        throw new Error('Failed to fetch products');
      }
      const data = response.json() as Promise<Response>;
      return (await data).products;
    },
  });

  // Method to reload products
  reload() {
    this.trigger.set(undefined);
  }
}

Component with Linked Signals

In the component, linkedSignal is used to manage derived states, like the list of categories and filtered products.

import { Component, effect, linkedSignal, signal } from '@angular/core';
import { ProductService } from '../product.service';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css'],
})
export class ProductListComponent {
  productsResource = this.productService.products;
  selectedCategory = signal<string>('all');

  categories = linkedSignal(() => {
    if (!this.productsResource.value()) return [];
    return Array.from(
      new Set(
        this.productsResource.value()?.map((product) => product.category)
      )
    );
  });

  filteredProducts = linkedSignal(() => {
    const category = this.selectedCategory();
    if (category === 'all') return this.productsResource.value();
    return this.productsResource.value()?.filter(
      (product) => product.category === category
    );
  });

  constructor(private productService: ProductService) {}

  selectCategory(e: any) {
    this.selectedCategory.set(e.target.value);
  }

  reload() {
    this.selectedCategory.set('all');
    this.productService.reload();
  }
}

The Benefits in Action

1. Automatic State Management: Loading, data, and error states are built into the Resource API.
2. Simplified UI Logic: The use of linkedSignal ensures that the UI automatically updates when data or user selections change.
3. Consistency Across Features: The same declarative pattern can be used for other data resources, ensuring uniformity across the app.

Conclusion

Angular 19’s Resource API is a significant step forward for Angular developers. By combining declarative data fetching with reactive signals, it provides:

• Cleaner code
• Enhanced maintainability
• A more consistent developer experience

When compared to the traditional approach, the Resource API not only reduces boilerplate but also aligns with Angular’s vision for reactive, signal-driven development, ensuring its relevance for years to come.

If you’re still using the old way, now is the time to embrace the future with Angular 19. What do you think about the Resource API? Let’s discuss in the comments below!

Checkout complete code example here: https://github.com/kategable/stackblitz-starters-linkedSignal

and StackBlitz: https://stackblitz.com/~/github.com/kategable/stackblitz-starters-linkedSignal

get more Angularv19 here https://blog.angular.dev/meet-angular-v19-7b29dfd05b84

Exploring Angular’s linkedSignal: Enhancing Signal Reusability

In Angular applications, managing state and reactivity often involves tools like BehaviorSubject from RxJS. With the advent of signals, particularly linkedSignal, Angular provides a declarative and more Angular-native approach to handling dynamic state transformations.

Let’s build a product filtering example to see how linkedSignal can simplify state management and potentially replace BehaviorSubject.

In this post, we’ll explore what linkedSignal is, its benefits, how it can replace BehaviorSubject in many use cases, and how you can implement it in your Angular applications.

What is linkedSignal?

The linkedSignal function allows you to create a signal whose value is derived from other existing signals. Unlike computed signals that focus on recalculating values reactively, linkedSignal is more tailored for situations where the new signal’s lifecycle and reactivity are closely tied to another signal or context.

This makes linkedSignal a perfect choice when:

• You need to extend or transform the behavior of an existing signal.
• You want to maintain a scoped reactive context within your application.

Why Replace BehaviorSubject with Signals?

Traditionally, Angular developers have relied on BehaviorSubject from RxJS for state management, such as holding and propagating reactive data. While powerful, BehaviorSubject has limitations that linkedSignal can address:

1. Boilerplate Reduction

With BehaviorSubject, you often have to write additional boilerplate for initialization, subscriptions, and updates:

const subject = new BehaviorSubject<number>(0);
subject.next(5);
subject.subscribe(value => console.log(value));

In contrast, linkedSignal provides a more concise and declarative API:

const baseSignal = signal(0);
const linked = linkedSignal(() => baseSignal() * 2);
console.log(linked());

2. Declarative State Management

linkedSignal eliminates the need for manual subscription management, reducing the risk of memory leaks and simplifying code structure. It’s purely declarative, meaning dependencies and updates are handled automatically.

3. Tight Integration with Angular

Unlike BehaviorSubject, which is an external library feature, linkedSignal is natively supported in Angular, ensuring seamless integration with other Angular features like templates and change detection.

Scenario: Product Filtering

Imagine you have a list of products, and the user can filter them by category. Using linkedSignal, we can create a reactive filtered list that updates automatically whenever the category or product list changes.

import { Component, signal, linkedSignal } from '@angular/core';

@Component({
  selector: 'app-product-filter',
  standalone: true,
  template: `
    <h2>Product Filter</h2>
    <div>
      <label>Filter by Category:</label>
      <select [value]="selectedCategory()" (change)="selectCategory($event.target.value)">
        <option value="all">All</option>
        <option *ngFor="let category of categories" [value]="category">
          {{ category }}
        </option>
      </select>
    </div>

    <div>
      <h3>Products</h3>
      <ul>
        <li *ngFor="let product of filteredProducts()">
          {{ product.name }} - {{ product.category }}
        </li>
      </ul>
    </div>
  `,
})
export class ProductFilterComponent {
  // Base signal for the list of products
  products = signal([
    { name: 'Laptop', category: 'Electronics' },
    { name: 'Headphones', category: 'Electronics' },
    { name: 'Sofa', category: 'Furniture' },
    { name: 'Table', category: 'Furniture' },
    { name: 'T-shirt', category: 'Clothing' },
  ]);

  // Signal for selected category
  selectedCategory = signal<string>('all');

  // Derived signal for filtering products based on the selected category
  filteredProducts = linkedSignal(() => {
    const category = this.selectedCategory();
    const allProducts = this.products();
    return category === 'all'
      ? allProducts
      : allProducts.filter(product => product.category === category);
  });

  // Generate a list of unique categories from the products
  get categories() {
    return Array.from(new Set(this.products().map(product => product.category)));
  }

  // Update the selected category
  selectCategory(category: string) {
    this.selectedCategory.set(category);
  }
}

Component Code

https://stackblitz.com/~/github.com/kategable/stackblitz-starters-linkedSignal?file=src/app/demo/demo.component.ts

How It Works

1. Signal Initialization:
   • products contains a static list of products.
   • selectedCategory holds the currently selected category.
2. Linked Signal:
   • filteredProducts derives its value based on products and selectedCategory. It automatically recalculates when either signal changes.
3. Reactivity in Action:
   • When the user selects a category, the filteredProducts signal updates the displayed list of products dynamically.
4. If we used BehaviorSubject:
   • Set up a subject,
   • add pipe for transformations,
   • add manual subscriptions or async pipe.
5. With linkedSignal:
   • Avoid subscriptions entirely.
   • Use Angular’s built-in reactivity for value updates.
   • Keep the code cleaner and more concise.

Benefits of This Approach

1. Dynamic Updates: Any change in the product list or selected category immediately updates the filtered list.
2. Code Clarity: The filtering logic is encapsulated within the linkedSignal, making it reusable and easier to test.
3. Performance: Signals ensure efficient updates with minimal recalculations.

When to Use linkedSignal Instead of BehaviorSubject

Consider using linkedSignal when:

• You are managing state within Angular components or services.
• You want a simpler, Angular-native alternative to RxJS subjects.
• The logic requires automatic dependency tracking and updates.

However, if you’re managing streams from external sources (e.g., WebSocket connections or complex asynchronous workflows), BehaviorSubject or other RxJS operators may still be more appropriate.

Conclusion

Angular’s linkedSignal simplifies state management by allowing you to derive signals dynamically. This product filter example demonstrates how you can build responsive and dynamic applications with ease.

Give it a try in your next Angular project, and let me know if you want more examples or use cases!

Code link:

git clone https://github.com/kategable/stackblitz-starters-linkedSignal.git

stackblitz – https://stackblitz.com/~/github.com/kategable/stackblitz-starters-linkedSignal?file=src/app/demo/demo.component.ts

get more Angularv19 here https://blog.angular.dev/meet-angular-v19-7b29dfd05b84

This is my attempt to help a new developer understand how nested arrays opperate.

A nested array can be thought of like a set of nested dolls, where each doll is contained within another doll.

[
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
]

This array can be thought of as a set of three nested dolls, where the first doll contains the array [1, 2, 3], the second doll contains the array [4, 5, 6], and the third doll contains the array [7, 8, 9].

Each of these inner arrays is itself an array, and so we can think of them as smaller dolls contained within the larger dolls. For example, the first doll (which contains the array [1, 2, 3]) can be thought of as containing three smaller dolls, one for each element in the array.

We can continue this process of nesting to any level. For example, we could have an array like this:

For example, consider the following array:

[
  [
    [1, 2],
    [3, 4]
  ],
  [
    [5, 6],
    [7, 8]
  ]
]

This array can be thought of as a set of two nested dolls, where the first doll contains the array [[1, 2], [3, 4]] and the second doll contains the array [[5, 6], [7, 8]]. Each of these inner arrays is itself an array, and so we can think of them as smaller dolls contained within the larger dolls. The innermost arrays ([1, 2] and [3, 4]) can be thought of as the smallest dolls in the set.

Here is an example of how you can search for elements within an array in JavaScript:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// Search for the number 3 in the array
const index = numbers.indexOf(3);
console.log(index);  // Output: 2 (the index of 3 in the array)

// Search for the number 10 in the array
const index = numbers.indexOf(10);
console.log(index);  // Output: -1 (10 is not in the array)

In this example, we have an array of numbers called numbers. We use the indexOf() method to search for the number 3 in the array. This method returns the index of the element in the array, or -1 if the element is not found.

So, when we search for the number 3, the indexOf() method returns 2, which is the index of 3 in the numbers array. When we search for the number 10, the indexOf() method returns -1, indicating that 10 is not in the array.

There are also other ways to search for elements within an array in JavaScript. For example, you can use the includes() method to check if an element is present in an array:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// Check if the array includes the number 3
const includesThree = numbers.includes(3);
console.log(includesThree);  // Output: true

// Check if the array includes the number 10
const includesTen = numbers.includes(10);
console.log(includesTen);  // Output: false

Here is an example of how you can search for elements within a nested array in JavaScript:

const numbers = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

// Search for the number 3 in the nested array
for (const innerArray of numbers) {
  const index = innerArray.indexOf(3);
  if (index !== -1) {
    console.log(`Found 3 at index ${index} of inner array ${innerArray}`);
  }
}

// Output: "Found 3 at index 2 of inner array [1, 2, 3]"

In this example, we have a nested array called numbers, which contains three inner arrays: [1, 2, 3], [4, 5, 6], and [7, 8, 9]. We use a for...of loop to iterate over each of the inner arrays, and we use the indexOf() method to search for the number 3 within each inner array.

If the indexOf() method returns a value other than -1, it means that 3 was found within the inner array. In this case, we log a message indicating the index at which 3 was found and the inner array in which it was found.

You can use a similar approach to search for elements within nested arrays at any level of nesting. For example, you could use a nested loop to iterate over each element within each inner array, and so on.

Here is an example of how you can use a recursive function to search for an element within a nested array in JavaScript:

function findElement(element, array) {
  for (const item of array) {
    if (Array.isArray(item)) {
      // If the current item is an array, recursively search for the element within that array
      const result = findElement(element, item);
      if (result) {
        // If the element was found, return the result
        return result;
      }
    } else if (item === element) {
      // If the current item is the element we are searching for, return its index
      return array.indexOf(item);
    }
  }

  // If the element was not found, return null
  return null;
}

const numbers = [[1, 2, 3], [4, 5, [6, 7]], [8, 9]];

// Search for the number 7 in the nested array
const index = findElement(7, numbers);
console.log(index);  // Output: "Found 7 at index [1, 1, 1]"

In this example, we have defined a function called findElement() that takes an element and an array as arguments. The function uses a for...of loop to iterate over the elements in the array, and it checks whether each element is itself an array.

If the element is an array, the function calls itself recursively with the element and the array as arguments. This process continues until an element is found that is not an array, at which point the function checks whether the element is the element we are searching for. If it is, the function returns the index of the element within the array. If the element is not found, the function returns null.

In the example above, we use the findElement() function to search for the number 7 within the nested array numbers. The function returns [1, 1, 1], which indicates that 7 was found at index 1 within the second inner array, which is itself at index 1 within the numbers array.

Here is an example of how you can use the flat() method to flatten a nested array and search for an element within it using the indexOf() method, which can provide a faster search for large arrays:

const numbers = [[1, 2, 3], [4, 5, [6, 7]], [8, 9]];

// Flatten the nested array using the flat() method
const flatNumbers = numbers.flat();

// Search for the number 7 in the flattened array
const index = flatNumbers.indexOf(7);
console.log(index);  // Output: 5 (the index of 7 in the flattened array)

In this example, we have a nested array called numbers that contains three inner arrays: [1, 2, 3], [4, 5, [6, 7]], and [8, 9]. We use the flat() method to flatten the array and create a new, one-dimensional array called flatNumbers.

We can then use the indexOf() method to search for the number 7 within the flattened array. This method returns the index of the element in the array, or -1 if the element is not found. In this case, the method returns 5, which is the index of 7 in the flattened array.

Using the flat() method and the indexOf() method can provide a faster search for large arrays, as the flat() method flattens the array in place and the indexOf() method performs a linear search through the array.

It is important to use optimal algorithm for searching nested arrays.

Using an optimal algorithm for searching nested arrays is important because it can help to reduce the time and computational resources required to find an element within the array. This can be particularly important when working with large arrays, as the time and resources required to search the array can increase significantly with the size of the array.

There are several algorithms that can be used to search nested arrays, each with its own trade-offs in terms of efficiency and complexity. For example, a linear search through the array (such as using the indexOf() method) can be relatively simple to implement, but it may not be the most efficient option for large arrays. On the other hand, more complex algorithms, such as binary search, can be more efficient but may require more implementation effort.

It is generally a good idea to choose an algorithm that is both efficient and easy to implement, depending on the specific requirements of your application. For example, if you are working with a small array that does not need to be searched frequently, a simple linear search may be sufficient. However, if you are working with a large array that needs to be searched frequently, you may want to consider using a more efficient algorithm.